Issue
I have a chat app, and I'm trying to show the messages from X user on the right side of the screen while having the other messages appear on the left.
<ion-item *ngFor="let message of messages | slice: 0:messages.length" class="msg">
<div *ngIf="this.message.user === this.user; else other" class="mine">
<ion-row class="own">
<ion-text color="tertiary"><b>{{ message.user }}: </b></ion-text>
<ion-text color="secondary"> {{ message.text }}</ion-text>
</ion-row></div>
<ng-template #other>
<ion-row class="other">
<ion-text color="primary"><b>{{ message.user }}: </b></ion-text>
<ion-text> {{ message.text }}</ion-text>
</ion-row>
</ng-template>
</ion-item>
</div>
I tried using the displayflex, but I only achieved to move all the messages, not only mine
Solution
Like this I would presume ?
<ion-row [ngClass]="message.user === user ? 'own' : 'other'">
<ion-row [class]="message.user === user ? 'own' : 'other'">
<ion-row class="{{ message.user === user ? 'own' : 'other' }}">
Answered By - MGX
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.