Conditional CSS Class

Question

I am using Ionic 2, and have the following html code:

<ion-content padding class="messages-page-content">
    <ion-scroll scrollY="true" class="messages">
        <ion-list>
            <ion-item class="message-item" *ngFor="let item of firelist | async">
                <div [class]="'message message-me'">
                    <div class="message-content">{{item.message_text}}</div>
                    <span class="time-tick">
                        <span class="message-timestamp">{{item.timestamp | amDateFormat: 'DD MMM YYYY  h:mm a'}}</span>
                        <div *ngIf="showTick(message) === true">
                            <span class="checkmark">
                                <div class="checkmark_stem"></div>
                                <div class="checkmark_kick"></div>
                            </span>    
                        </div>
                    </span>
                </div>
            </ion-item>
        </ion-list>
    </ion-scroll>
</ion-content>

If you look at this line in particular:

<div [class]="'message message-me'">

I would like to be able to dynamically change the class.

For example, something like this, but I cannot get this to work:

<div [class]="{{item.memberId === me.memberId ? 'message message-me' : 'message message-you'}}">

Where me is defined in the supporting ts file.

Any advise welcome.

UPDATE

Based on the advise below outlined here, I try the following:

    <div [class]="{'message message-me' : (item.uid == me.uid), 'message message-you':(item.uid === you.uid)}">

Now, I just lose all my formatting but no errors. Objects item.uid and me.uid do exist.

Original code:

<div [class]="'message message-me'">

UPDATE

The following kind of works:

<div [ngClass]="{'message message-you':(item.uid === you.uid), 'message message-me':(item.uid === me.uid)}">

I have a list where both conditions are met, but only the right hand condition is applying the style. If I swap the left and right conditions around, the other style works, so this suggests nothing is wrong with the data, but rather the html.

If I change it to:

<div [ngClass]="{'message message-me':(item.uid === me.uid), 'message message-you':(item.uid === you.uid)}">

I get:

I also try:

    <div [ngClass]="{'message message-me':(item.uid != you.uid), 'message message-you':(item.uid === you.uid)}">

To prove it's not a problem with the data, but only the right hand class is ever applied.

Hi Suraj, thank you for your advise once again. I have tried what that post suggests, but lose my style altogether now. Please see UPDATE above. — Richard
– Richard, Commented Feb 8, 2017 at 8:14
you need to use ngClass attribute..not 'class' angular.io/docs/ts/latest/guide/template-syntax.html#!#ngClass — Suraj Rao
– Suraj Rao, Commented Feb 8, 2017 at 8:15

Felipe Centeno · Accepted Answer · 2019-01-05 00:17:07Z

2

Why not just use this syntax which I think it's easier to read:

<div [class.Myclass]="my-condition">

In your case this would look like this:

<div class="message" [class.message-me]="item.memberId === me.memberId" [class.message-you]="item.memberId !== me.memberId">

So the class "message" is applied with no conditions, and the class message-me and message-you are applied conditionally

answered Jan 5, 2019 at 0:17

Felipe Centeno

3,8673 gold badges27 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Richard · Accepted Answer · 2017-02-08 10:03:05Z

Seems like a bit of a hack, because I need to have two ngClass, but this works:

  <div [ngClass]="{'message message-me':(item.uid == me.uid)}">
    <div [ngClass]="{'message message-you':(item.uid == you.uid)}">
                <div class="message-content">{{item.message_text}}</div>
                <span class="time-tick">
                    <span class="message-timestamp">{{item.timestamp | amDateFormat: 'DD MMM YYYY  h:mm a'}}</span>
                    <div *ngIf="showTick(item) === true">
                        <span class="checkmark">
                            <div class="checkmark_stem"></div>
                            <div class="checkmark_kick"></div>
                        </span>
                    </div>
                </span>
            </div>
        </div>

Collectives™ on Stack Overflow

Conditional CSS Class

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related