Angular 2, using ngClass with conditionals in ngFor

angular angular-ng-if
BrS picture BrS · Jun 30, 2017 · Viewed 14.2k times · Source

I have ngFor loop that displays data, and based on if something is true or false in that loop, how can I change css? What I tried, does not work for me.

HTML

<div class="class" *ngFor="let something of something" [ngClass]="{'classno2': sent}">
    <div> {{something.name}}
    </div>
</div>

TypeScript 

something;

this.something = [
    {name: "NAMEE", sent: false},
    {name: "NAMEE2", sent: true},
]

CSS

.class {
    color: red;
}
.classno2 {
    color: blue;
}

I get no errors, but yet nothing changes.

Answer

Aakash Thakur picture Aakash Thakur · Jun 30, 2017

You can use [ngClass] like this:

<div *ngFor="let some of something" [ngClass]="{'classno2': some.sent, 'class': !some.sent}">
    <div> {{some.name}}
    </div>
</div>

Above will take care of styling based on whether sent is true/false.

Working plunker:https://plnkr.co/edit/45regTAQvbCu61kvUAlJ?p=preview

Related questions

*ngIf and *ngFor on same element causing error

I'm having a problem with trying to use Angular's *ngFor and *ngIf on the same element. When trying to loop through the collection in the *ngFor, the collection is seen as null and consequently fails when trying to access its …

Read More
Angular 4 default radio button checked by default

I'm trying to mark as a default a radiobutton depending on the value I get from my object, it can be True or False. What could I do to mark as a default radiobutton depending on the option? <label&…

Read More
*ngIf else if in template

How would I have multiple cases in an *ngIf statement? I'm used to Vue or Angular 1 with having an if, else if, and else, but it seems like Angular 4 only has a true (if) and false (else) condition. According to …

Read More