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

<ion-header>
  <ion-toolbar>
    <ion-title>Chat</ion-title>
    <ion-icon slot="end" src="assets/images/icons-chat-new-group.svg" class="iconschatnew-group"></ion-icon>
    <ion-icon slot="end" src="assets/images/icons-chat-new-conversation.svg" class="iconschatnew-conversation" [routerLink]="['/home/chat/newchat']"></ion-icon>
  </ion-toolbar>
</ion-header>

<ion-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>
  <div [ngSwitch]="segment">
    <ion-list *ngSwitchCase="'Contactos'" >
      <ion-item-group>
        <ion-item-sliding>
            <ion-item *ngFor="let user of userConnectedList" (click)="starConversation(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>

</ion-content>