chat.html

<ion-header>

  <ion-navbar>
    <ion-title>Chat</ion-title>

    <ion-buttons start>
      <img class="header-image" src="assets/images/logo-small-white.png">
    </ion-buttons>        
    
    <ion-buttons end>
      <button ion-button icon-only (click)="closeChat()">
        <ion-icon name="close-circle"></ion-icon>
      </button>
    </ion-buttons>
        
  </ion-navbar>

</ion-header>


<ion-content>
  <ion-list>
    <ion-item #chatItems *ngFor="let chat of chats" no-lines>
      <div class="chat-status" text-center *ngIf="chat.type==='join'||chat.type==='exit';else message">
        <span class="chat-date">{{chat.sendDate | date:'short'}}</span>
        <span class="chat-content-center">{{chat.message}}</span>
      </div>
      <ng-template #message>
        <div class="chat-message" text-right *ngIf="chat.user === nickname">
          <div class="right-bubble">
            <span class="msg-name">Me</span>
            <span class="msg-date">{{chat.sendDate | date:'short'}}</span>
            <p text-wrap>{{chat.message}}</p>
          </div>
        </div>
        <div class="chat-message" text-left *ngIf="chat.user !== nickname">
          <div class="left-bubble">
            <span class="msg-name">{{chat.user}}</span>
            <span class="msg-date">{{chat.sendDate | date:'short'}}</span>
            <p text-wrap>{{chat.message}}</p>
          </div>
        </div>
      </ng-template>
    </ion-item>
  </ion-list>
</ion-content>

<ion-footer>
  <ion-grid>
    <ion-row>
      <ion-col col-9>
        <textarea rows="3" [(ngModel)]="data.message" (keyup.enter)="sendMessage()" placeholder="Type your message ..."></textarea>
      </ion-col>
      <ion-col col-3>
          <button ion-button (click)="sendMessage()">Send</button>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-footer>