ngClass

It allows us to dinamically add or remove css classes.

[ngClass]="{ odd: odd % 2 !== 0 }"
<div [ngClass]="{
        'active': isActive,
        'inactive': !isActive,
    }">
Hello</div>
<td [ngClass]="val > 10 ? 'red' : 'green'">{{ val }}</td>
<div [ngClass]="{'first': true, 'second': true, 'third': false}">...</div>

Add “even” class to every second item

*ngFor="let item of mockData; let i = index" [ngClass]="{ even: i % 2 === 1 }"
Was this page helpful?