Chat UI in ionic 3 - html

Question

I have tried to create a chat UI. I’m having the trouble with the placement of chat bubbles. It is as
This is my HTML code
<ion-list no-lines class="msgbubble" *ngFor="let msg of messages">
<div class="innermsg left" *ngIf="userId != msg.id">
{{ msg.reply }}
</div>
<div class="innermsg right" *ngIf="userId == msg.id">
{{ msg.reply }}
</div>
</ion-list>
This is my scss code
.innermsg {
display: inline-block;
padding: 5px 10px;
margin: 5px;
font-weight: 500;
font-size: 16px;
border-radius: 15px;
margin-bottom: 5px;
}
.innermsg.left {
float: left;
background-color: #F1F0F0;
color: black;
}
.innermsg.right {
float: right;
//margin-right: 10%;
background-color: #0084FF;
color: white;
}
.msgbubble {
margin-bottom: 10px;
}
Can someone help me in displaying chat bubbles on after the another, but not in the same line as shown in above picture.

Answer 1

The HTML structure needs to change a bit, each chat bubble needs to take up a line and only the contents inside the line must have the formatting you have.
Like this:
<ion-list no-lines class="msgbubble" >
<ion-item *ngFor="let msg of messages">
<span [ngClass]="userId == msg.id ? 'innermsg right':'innermsg left'">{{ msg.reply }}</span>
</ion-item>
</ion-list>
Check the implementation here

Answer 2

Use flexbox, flex-direction: column, and give each person differing align-self values.
In Angular I think the syntax for the element would be:
<div [ngClass]="userId === msg.id ? 'me' : 'you'">{{msg.reply}}</div>
Here's an example with static elements:
.chat {
font-family: sans-serif;
display: flex;
flex-direction: column;
}
.message {
border-radius: 5px;
margin: 0.2em 0;
padding: 0.5em;
max-width: 50%;
}
.me {
align-self: flex-start;
background-color: blue;
color: white;
}
.you {
align-self: flex-end;
background-color: green;
color: white;
}
<div class="chat">
<div class="message me">Hello</div>
<div class="message you">Hello</div>
<div class="message me">How are you?</div>
<div class="message you">I'm fine</div>
<div class="message you">How about you?</div>
<div class="message me">I'm doing so amazingly you wouldn't believe all the things that are happening right now it would take up at least 50% of the width of the page to discuss all the things that I want to tell you.</div>
</div>

Answer 3

Here is my code for my chat app that I've been working on. You may be able to have some use from it.
<ion-list>
<div text-right *ngFor="let message of messages; let i = index; let first = first;">
<div *ngIf = "message.from == this.user">
<span *ngIf = "i==0" >
<ion-label stacked> {{message?.from}} </ion-label>
<p text-right> {{message?.msg}}</p>
</span>
<span *ngIf = "i>0 && message.from == messages[i-1].from" >
<p text-right> {{message?.msg}}</p>
</span>
<span *ngIf = "i>0 && message.from != messages[i-1].from" >
<ion-label stacked> {{message?.from}} </ion-label>
<p text-right> {{message?.msg}}</p>
</span>
</div>
<div *ngIf = "message.from != this.user">
<span *ngIf = "i==0" >
<ion-label stacked text-left> {{message?.from}} </ion-label>
<p text-left> {{message?.msg}}</p>
</span>
<span *ngIf = "i>0 && message.from == messages[i-1].from" >
<p text-left> {{message?.msg}}</p>
</span>
<span *ngIf = "i>0 && message.from != messages[i-1].from" >
<ion-label stacked text-left> {{message?.from}} </ion-label>
<p text-left> {{message?.msg}}</p>
</span>
</div>
</div>
</ion-list>