1-Improved project structure. 2-Added new pages. 3-Prepared the environment to consume APIS. 4-Added Axios to the project. 5-Added get methods.

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

@@ -0,0 +1,149 @@
+<ion-header translucent="true">
+  <ion-toolbar>
+    <ion-title>
+      <ion-item class="ion-text-header-top" lines="none">
+        <div class="div-logo">
+          <img src='assets/images/logo.png' alt='logo'>
+        </div>
+        <ion-label>
+          <h6 class="header-xsmall">Presidente da República</h6>
+          <h2 class="header-large">GABINETE DIGITAL</h2>
+        </ion-label>
+      </ion-item>
+      <ion-item class="ion-text-right" lines="none">
+        <ion-label class="ion-text-wrap">
+            <h3 class="header-medium"> {{greetting}} Sua Excelência <br />
+              Minístro Director do Gabinete do<br />
+              Presidente da República
+            </h3>
+          <p class="p-small">{{customDate}}</p>
+        </ion-label>
+      </ion-item>
+    </ion-title>
+  </ion-toolbar> 
+</ion-header>
+
+<ion-content>
+  <!-- TABS -->
+  <ion-toolbar >
+    <ion-segment [(ngModel)]="segment">
+      <ion-segment-button value="combinada">
+        Combinada
+      </ion-segment-button>
+      <ion-segment-button value="oficial">
+        Oficial
+      </ion-segment-button>
+      <ion-segment-button value="pessoal">
+        Pessoal
+      </ion-segment-button>
+    </ion-segment>
+  </ion-toolbar>
+  <!-- List of Text Items -->
+  <div [ngSwitch]="segment">
+    <ion-list *ngSwitchCase="'combinada'">
+
+      <ion-item-group>
+        <!-- [routerLink]="['/events', event.id]" 
+        (click)="gotTo(event.id)"-->
+        <ion-item-sliding>
+          <ion-item lines="none" 
+          *ngFor="let event of events" 
+          [routerLink]="['/home/events', event.EventId]">
+
+            <div class="div-item">
+              <div class="div-up">
+                <div class="div-icon">
+                  <ion-icon slot="start" name="reader"></ion-icon>
+                </div>
+                <div class="div-content-oficial">
+                  <h3>{{event.Subject}}</h3>
+                  <p>{{event.StartDate}} - {{event.EndDate}}</p>
+                </div>
+              </div>
+              <div class="div-botton">
+                <div class="div-botton-left">
+                  <ion-icon class="ion-icon-location" slot="start" name="location"></ion-icon>
+                </div>
+                <div class="div-botton-middle">
+                  <p class="item-list-small">{{event.Location}}</p>
+                </div>
+                <div class="div-botton-right">
+                  <ion-icon class="ion-icon-attach" slot="end" name="attach-outline"></ion-icon>
+                </div>
+              </div>
+            </div>
+          </ion-item>
+      </ion-item-sliding>
+
+      </ion-item-group>
+
+    </ion-list>
+  <!-- OFICIAL -->
+    <ion-list *ngSwitchCase="'oficial'">
+      <ion-item-group>
+        <ion-item-sliding>
+          <ion-item-divider>
+            <ion-label>8:00 am</ion-label>
+          </ion-item-divider>
+          <ion-item lines="none" *ngFor="let event of events">
+            <div class="div-item">
+              <div class="div-up">
+                <div class="div-icon">
+                  <ion-icon slot="start" name="reader"></ion-icon>
+                </div>
+                <div class="div-content-oficial">
+                  <h3>{{event.Subject}}</h3>
+                  <p>{{event.StartDate}} - {{event.EndDate}}</p>
+                </div>
+              </div>
+              <div class="div-botton">
+                <div class="div-botton-left">
+                  <ion-icon class="ion-icon-location" slot="start" name="location"></ion-icon>
+                </div>
+                <div class="div-botton-middle">
+                  <p class="item-list-small">{{event.Location}}</p>
+                </div>
+                <div class="div-botton-right">
+                  <ion-icon class="ion-icon-attach" slot="end" name="attach"></ion-icon>
+                </div>
+              </div>
+            </div>
+          </ion-item>
+        </ion-item-sliding>
+      </ion-item-group>
+    </ion-list>
+
+      <ion-list *ngSwitchCase="'pessoal'">
+        <ion-item-group>
+          <ion-item-sliding>
+            <ion-item lines="none" *ngFor="let event of events">
+              <div class="div-item">
+                <div class="div-up">
+                  <div class="div-icon">
+                    <ion-icon slot="start" name="reader"></ion-icon>
+                  </div>
+                  <div class="div-content-pessoal">
+                    <h3>{{event.Subject}}</h3>
+                    <p>{{event.StartDate}} - {{event.EndDate}}</p>
+                  </div>
+                </div>
+                <div class="div-botton">
+                  <div class="div-botton-left">
+                    <ion-icon class="ion-icon-location" slot="start" name="location"></ion-icon>
+                  </div>
+                  <div class="div-botton-middle">
+                    <p class="item-list-small">{{event.Location}}</p>
+                  </div>
+                  <div class="div-botton-right">
+                    <ion-icon class="ion-icon-attach" slot="end" name="attach"></ion-icon>
+                  </div>
+                </div>
+              </div>
+            </ion-item>
+          </ion-item-sliding>
+        </ion-item-group>
+
+      </ion-list>
+  </div>
+</ion-content>
+