Chat app display

Hello,
I am new to programming and I am running into some trouble creating a little chat app. I want the messages displayed similar to facebook messenger. So far this is what I go.

HTML CODE:

<ion-item *ngFor=“let chat of chats$ | async” lines=‘none’>

    <ion-badge color="warning"
    [attr.slot]="chat.senderId == currentUserId ? 'end' : 'start'"
    >{{chat.message}}
    <ion-note color="medium"
      >{{chat.createdDate | date: 'shortTime' }} <ion-icon name="checkmark-done-circle-outline"></ion-icon></ion-note
  ></ion-badge>
 
  
</ion-item> 

1610380666660-20463101192988×5312 2.22 MB

Thank you.

5 posts - 2 participants

Read full topic