Events and Special events HTML

Author: Vishwas Gopinath - I16165

ngApp/src/app/event.service.ts

@@ -10,10 +10,10 @@ export class EventService {
   constructor(private http: HttpClient) { }
 
   getEvents() {
-    return this.http.get(this._eventsUrl)
+    return this.http.get<any>(this._eventsUrl)
   }
 
   getSpecialEvents() {
-    return this.http.get(this._specialEventsUrl)
+    return this.http.get<any>(this._specialEventsUrl)
   }
 }

ngApp/src/app/events/events.component.html

@@ -1,3 +1,14 @@
-<p>
-  events works!
-</p>
+<div class="row mt-5">
+  <div class="col-md-4 mb-3" *ngFor="let event of events">
+    <div class="card text-center">
+      <div class="card-body">
+        <h5 class="card-title">{{event.name}}</h5>
+        <p class="card-text">{{event.description}}</p>
+        <a href="#" class="btn btn-primary">Buy Tickets</a>
+      </div>
+      <div class="card-footer text-muted">
+        {{event.date | date:'shortDate'}}
+      </div>
+    </div>
+  </div>
+</div>

ngApp/src/app/events/events.component.ts

@@ -8,12 +8,13 @@ import { EventService } from '../event.service';
 })
 export class EventsComponent implements OnInit {
 
+  events = []
   constructor(private _eventService: EventService) { }
 
   ngOnInit() {
     this._eventService.getEvents()
       .subscribe(
-        res => console.log(res),
+        res => this.events = res,
         err => console.log(err)
       )
   }

ngApp/src/app/special-events/special-events.component.html

@@ -1,3 +1,14 @@
-<p>
-  special-events works!
-</p>
+<div class="row mt-5">
+    <div class="col-md-4 mb-3" *ngFor="let event of specialEvents">
+      <div class="card text-center">
+        <div class="card-body">
+          <h5 class="card-title">{{event.name}}</h5>
+          <p class="card-text">{{event.description}}</p>
+          <a href="#" class="btn btn-success">Buy Tickets</a>
+        </div>
+        <div class="card-footer text-muted">
+          {{event.date | date:'shortDate'}}
+        </div>
+      </div>
+    </div>
+  </div>

ngApp/src/app/special-events/special-events.component.ts

@@ -7,14 +7,16 @@ import { EventService } from '../event.service';
   styleUrls: ['./special-events.component.css']
 })
 export class SpecialEventsComponent implements OnInit {
+  
+  specialEvents = []
 
   constructor(private _eventService: EventService) { }
 
 
   ngOnInit() {
     this._eventService.getSpecialEvents()
       .subscribe(
-        res => console.log(res),
+        res => this.specialEvents = res,
         err => console.log(err)
       )
   }