doneit-web/src/app/pages/events/events.page.html

<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 />
              Ministro 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>
        <ion-item-sliding>
          <ion-item lines="none" 
          *ngFor="let event of eventsList"
          [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 eventsList">
            <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 eventsList">
              <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>