Angular <p> displayed by *ngFor won't float to the right

Question

I have this chat in which I'm trying to apply styles to the "chat-container".

The messages are displayed with Angular's *ngFor as follows:

<p *ngFor="let m of messageArray" [ngClass]="this.currentUser.user._id==m.src?'self pr-3':'otherUser pl-3'">
   {{m.msg}}
</p>

The classes applied only have float:left or float:right depending on the user that sent each message. However, they're always being displayed in the left.

Any suggestions on how to make the messages float to their corresponding side?

Answer 1

use flexbox

<p *ngFor="let m of messageArray" [ngClass]="this.currentUser.user._id==m.src?'self pr-3':'otherUser pl-3'" class='message'>
   {{m.msg}}
</p>

on CSS:

.message {
 display: flex;
 flex-flow: row nowrap;
 width: 100%;
}

.self {
 align-items: flex-end;
}

.otherUser {
 align-items: flex-start;
}

use width on parent div to cover the available space.(you can set the width with px or % is up to you)