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

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" >
          <div *ngIf="this.message.user === this.user; else other" >
            <ion-row >
              <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 >
              <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

CodePudding user response：

Like this I would presume ?

<ion-row [ngClass]="message.user === user ? 'own' : 'other'">
<ion-row [class]="message.user === user ? 'own' : 'other'">
<ion-row >