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

<ion-header>
  <app-header></app-header>
</ion-header>
<ion-header  class="ion-no-border">
  <ion-toolbar class="bg-blue">
    <div class="main-header">
      <div class="title-content">
        <div class="div-title">
          <ion-label class="title">Chat</ion-label>
        </div>
        <div class="div-icon">
          <ion-icon slot="end" src="assets/images/icons-chat-new-group.svg" ></ion-icon>
          <ion-icon slot="end" src="assets/images/icons-chat-new-conversation.svg" [routerLink]="['/home/chat/newchat']"></ion-icon>
        </div>
      </div>
    </div>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="main-content">
  <ion-toolbar >
    <ion-segment [(ngModel)]="segment" (ionChange)="onSegmentChange()">
      <ion-segment-button value="Contactos">
        Contactos
      </ion-segment-button>
      <ion-segment-button value="Grupos">
        Grupos
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
  <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
  </ion-refresher>
  <div [ngSwitch]="segment">
    <ion-list *ngSwitchCase="'Contactos'">
      <ion-item-group>
        <ion-item-sliding>
            <ion-item *ngFor="let user of userConnectedList" (click)="startConversation(user)"> 
              <ion-icon slot="start" src="assets/images/icons-chat-chat-40.svg" class="iconschatchat-40"></ion-icon>
              <div>
                <h3>{{user.name}}</h3>
                <p>Podemos marcar reunião para amanha</p>
              </div>
            </ion-item>    
        </ion-item-sliding>
      </ion-item-group>
    </ion-list>
    <ion-list *ngSwitchCase="'Grupos'" >
      <ion-item-group>
        <ion-item-sliding>
            <ion-item *ngFor="let group of groupList">
              <ion-icon slot="start" src="assets/images/icons-chat-group-chat-40.svg" class="iconschatgroup-chat-40"></ion-icon>
              <div>
                <h3>{{group.name}}</h3>
                <p>Grande momento.</p>
              </div>
            </ion-item>    
        </ion-item-sliding>
      </ion-item-group>
      
    </ion-list>
  </div>
</div>
</ion-content>