ngClass with condition

Ionic Framework ionic-v3
1

hello, here is my code :

<ion-item *ngFor="let m of messages | async">
        <div [ngClass]="{ 'from': m.from === 'bot','to':   m.from === 'user' }">  
          <div class="chat-bubble">
            <p class="message">{{ m.msg }} </p> 
          </div>
      </div> 
    </ion-item>

possible to put css with *ngIf ?

2

I’m not sure I understand your question.

3

I want to separate the message with a condition if possible, like the class “to” on the left and the class “from” on the right

4

So, is your posted code not working/accomplishing that?

5

nothing works, I was wondering if a person can help me do it with the ngClass and ngIf directive

6

That’s awfully expensive. Better to do preprocessing in the ts file, and change the string to what you need. Then you display that in the template. If you use ngIf or ngClass for that, you’ll have the DOM rechecking each ngIf statement x-many times per minute, even though the string will never change.

7

thank you, but I think find the soultion

.from{
      border-radius: 5px;
      padding: 10px 18px;
      position: relative;
      margin: 10px;
      max-width: 80%;
      background-color: #158ffe;
      color: #fff;
      float: right;
      margin-right: 55px;
    }
    .to{
        border-radius: 5px;
        padding: 10px 18px;
        position: relative;
        margin: 10px;
        max-width: 80%;
        background-color: #e6e5eb;
        float: left;
        margin-left: 55px;
    }

in my css file