How to assign distinct scss classes to a div depending on a condition

September 22, 2022

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 }}: &nbsp;</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 }}: &nbsp;</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' }}">