Implemented GET call requests to see the events and also each event detail

src/app/pages/events/event-detail/event-detail.page.html

@@ -3,13 +3,59 @@
     <ion-buttons slot="start">
       <ion-back-button defaultHref="/events"></ion-back-button>
     </ion-buttons>
-    <ion-title>Event detail</ion-title>
+    <ion-title>Visualizar Evento</ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content>
-  <ion-item>
-    <ion-label>{{loadedEvent.Subject}}</ion-label>
-  </ion-item>
-
+<ion-content *ngIf="eventItem | async as event" padding>
+  <ion-item-group>
+    <ion-item>
+      <ion-label position="stacked">Assunto</ion-label>
+      <ion-input value='{{event.Subject}}'></ion-input>
+    </ion-item>
+    <ion-item>
+      <ion-label position="stacked">Descrição</ion-label>
+      <ion-input value='{{event.Body.Text}}'></ion-input>
+    </ion-item>
+    <ion-item>
+      <ion-label position="stacked">Localização</ion-label>
+      <ion-input value='{{event.Location}}'></ion-input>
+    </ion-item>
+    <ion-item>
+      <ion-label position="stacked">Intervenientes</ion-label>
+      <ion-list>
+        <ion-item *ngFor="let inter of event.RequiredAttendees">
+          <ion-input value='{{inter.Name}}'></ion-input>
+        </ion-item>
+      </ion-list>
+    </ion-item>
+    <ion-item>
+      <ion-label position="stacked">Carácter</ion-label>
+      <ion-input value='{{event.CalendarName}}'></ion-input>
+    </ion-item>
+    <ion-item>
+      <ion-label position="stacked">Tipo do evento</ion-label>
+      <ion-input value='{{event.EventType}}'></ion-input>
+    </ion-item>
+    <ion-item>
+      <ion-label position="stacked">Data Início: </ion-label>
+      <ion-input value='{{event.StartDate}}'></ion-input>
+    </ion-item>
+    <ion-item>
+      <ion-label position="stacked">Data Fim</ion-label>
+      <ion-input value='{{event.EndDate}}'></ion-input>
+    </ion-item>
+    <ion-list>
+      <ion-list-header>Anexos</ion-list-header>
+      <ion-item>
+        <ion-icon name="attach" slot="start"></ion-icon>
+        <ion-label>Lei do orçamento geral do Estado</ion-label>
+      </ion-item>
+    </ion-list>
+  </ion-item-group>
+  <div class="event-detail-buttons">
+    <ion-button fill="outline" class="ion-button-left">Recusar</ion-button>
+    <ion-button class="ion-button-right">Aprovar</ion-button>
+  </div>
 </ion-content>
+

src/app/pages/events/event-detail/event-detail.page.scss

@@ -0,0 +1,14 @@
+.event-detail-buttons{
+    width: 80%;
+    margin: 10px auto;
+}
+.event-detail-buttons ion-button{
+    width: 40%;
+}
+.ion-button-left{
+    float: left;
+    background: none;
+}
+.ion-button-right{
+    float: right;
+}

src/app/pages/events/event-detail/event-detail.page.ts

@@ -3,6 +3,7 @@ import { ActivatedRoute } from '@angular/router';
 import { EventsService } from 'src/app/services/events.service';
 
 import { Event } from '../../../models/event.model';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'app-event-detail',
@@ -12,6 +13,7 @@ import { Event } from '../../../models/event.model';
 export class EventDetailPage implements OnInit {
 
   loadedEvent: Event;
+  eventItem: Observable<Event>;
 
   constructor(private activatedRoute: ActivatedRoute, private eventsService: EventsService) { }
 
@@ -24,7 +26,8 @@ export class EventDetailPage implements OnInit {
       }
       const eventId = paramMap.get('eventId');
       /* Load my event detail */
-      this.loadedEvent = this.eventsService.getEvent(eventId);
+      /* this.loadedEvent = this.eventsService.getEvent(eventId); */
+      this.eventItem = this.eventsService.getEvent(eventId);
     });
   }
 

src/app/pages/events/events.page.html

@@ -40,16 +40,13 @@
   </ion-toolbar>
   <!-- List of Text Items -->
   <div [ngSwitch]="segment">
-    <ion-list *ngSwitchCase="'combinada'">
+    <ion-list *ngSwitchCase="'combinada'" >
 
-      <ion-item-group>
-        <!-- [routerLink]="['/events', event.id]" 
-        (click)="gotTo(event.id)"-->
+      <ion-item-group *ngIf="eventsList | async as events">
         <ion-item-sliding>
           <ion-item lines="none" 
-          *ngFor="let event of events" 
+          *ngFor="let event of events"
           [routerLink]="['/home/events', event.EventId]">
-
             <div class="div-item">
               <div class="div-up">
                 <div class="div-icon">

src/app/pages/events/events.page.ts

@@ -4,6 +4,7 @@ import { Event } from '../../models/event.model';
 import { EventsService } from 'src/app/services/events.service';
 import { Router } from '@angular/router';
 import { ActivatedRoute } from '@angular/router';
+import { Observable } from 'rxjs';
 
 
 @Component({
@@ -28,6 +29,7 @@ timeDate = this.today.getHours() + ":" + this.today.getMinutes();
  segment:string;
 
  events: Event[];
+ eventsList: Observable<Event[]>;
 
  constructor(private eventService: EventsService, private router: Router, public activatedRoute: ActivatedRoute) { }
 
@@ -37,6 +39,7 @@ timeDate = this.today.getHours() + ":" + this.today.getMinutes();
    this.showGreeting();
    /* Call Get events method */
    this.events = this.eventService.getAllEvents();
+   this.eventsList = this.eventService.allEvents();/* .subscribe(prods=>console.log(prods)); */
  }
 
  showGreeting(){