vxh.viet
11/12/2018 - 8:18 AM

Angular - ngClass & ngFor

Angular - Add Custom Class to Element With ngClass

SOURCE, SOURCE

Another syntax for ngClass:

add class hidden-element to div if the condition is satisfied

<div [class.hidden-element]="item.hidden">
  ...
</div>

this is similar to

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>

this will add a CSS class named first to the first element of the list, and a CSS class named last to the last element of the list:

<tr *ngFor="let hero of heroes; let first = first; let last = last" 
    [ngClass]="{ first: first, last: last }">
    <td>{{hero.name}}</td>
</tr>