Angular template apply class using iters and *ngFor

Question

I have this code:

<thead>
  <th class="dude" *ngFor="let tp of column_names;let i=index">{{tp}}</th>
</thead>

How do I apply a class based on index? E.g. first index gets class dude_0 when the rest get dude_1?

e.g.

 <thead>
     if i==0
          <th class="dude_0" *ngFor="let tp of column_names;let i==index"{{tp}}</th>
     if i>0
         <th class="dude_1" *ngFor="let tp of column_names;let i=index"{{tp}}</th>


</thead>

Possible duplicate of [Dynamic classname inside ngClass in angular 2](https://stackoverflow.com/questions/37090877/dynamic-classname-inside-ngclass-in-angular-2) — Sharikov Vladislav, Nov 30 '17 at 07:57

score 3 · Answer 1 · answered Nov 30 '17 at 07:54

<th *ngFor="let tp of column_names; index as index" [class.dude_0]="index === 0" 
    [class.dude_1]="index > 0">{{tp}}</th>

Or even simpler, with first:

<th *ngFor="let tp of column_names; first as first" [class.dude_0]="first" 
    [class.dude_1]="!first">{{tp}}</th>

score 2 · Accepted Answer · answered Nov 30 '17 at 07:53

2

Use the [ngClass]

<thead>
  <th [ngClass]="{'dude_0': i==0, 'dude_1': i>0}" *ngFor="let tp of column_names;let i=index">{{tp}}</th>
</thead>

answered Nov 30 '17 at 07:53

Sachila Ranawaka

31,266
5
51
75

Angular template apply class using iters and *ngFor

2 Answers2