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

<ion-header translucent="true">
    <!-- <ion-buttons *ngIf="!showSearchbar" slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons> -->

  <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>
          <!-- <p>{{timeDate}}</p> -->
        </ion-label>
      </ion-item>
    </ion-title>
    <!-- <ion-segment *ngIf="ios" [(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> 
  <!-- TABS -->
</ion-header>

<ion-content>
  <ion-toolbar > <!-- *ngIf="!ios" -->
    <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-divider>
          <ion-label>8:00 am</ion-label>
        </ion-item-divider> -->
        <ion-item-sliding>
          <ion-item lines="none">
            <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>Reunião de Conselho de Ministros</h3>
                  <p>08:30 - 10:30</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">Luanda, Palácio presidencial</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-divider>
          <ion-label>9:00 am</ion-label>
        </ion-item-divider> -->
        <ion-item lines="none">
          <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>Conference call Particular</h3>
                <p>11:00 - 12:30</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">Luanda, Palácio presidencial</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 lines="none">
          <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>Conference call Particular</h3>
                <p>11:00 - 12:30</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">Luanda, Palácio presidencial</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>
<!-- 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">
            <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>Reunião de Conselho de Ministros</h3>
                  <p>08:30 - 10:30</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">Luanda, Palácio presidencial</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 lines="none">
            <ion-icon slot="start" name="chatbox"></ion-icon>
            <ion-label>
              <h3>Conference call Particular</h3>
              <p>11:00 - 12:30</p>
            </ion-label>
          </ion-item>
          <ion-item class="ion-item-class" lines="none">
            <ion-icon class="ion-icon-size" slot="start" name="location"></ion-icon>
            <ion-label class="label-text">
              <p class="item-list-small">Luanda, Palácio presidencial</p>
            </ion-label>
            <ion-icon class="ion-icon-size" slot="end" name="attach-outline"></ion-icon>
          </ion-item>
        -->
        </ion-item-sliding>
      </ion-item-group>
    </ion-list>
      <ion-list *ngSwitchCase="'pessoal'">
        <ion-item-group>
          <ion-item-sliding>
            <ion-item-divider>
              <ion-label>9:00 am</ion-label>
            </ion-item-divider>
            <ion-item lines="none">
              <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>Conference call Particular</h3>
                    <p>11:00 - 12:30</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">Luanda, Palácio presidencial</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>