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> 

.

Thank you.

I don’t see a question here

I was asking how to display the messages like Facebook messenger or whatsapp.

So basically you want that someone posts a complete code? That’s not really what you should ask for. Better as for specific topic or problems you have while developing this by your own

1 Like

No, that is not what I was asking for. I have already completed all of the backend codes. I just encountered a little problem effectively displaying the messages on the HTML page as shown on my first post.
But thank you for your contribution.

UPDATE:
Here is the solution to my problem. Thanks.