Angular: use a class with *ngIf

Question

<ul class="list-group">
  <li *ngFor="let t of todos; let i = index" class="list-group-item" >{{ t }}</li>
</ul>

t is a string. I want to have this element if i == 0:

<li class="list-group-item active" >{{ t }}</li>

and this element if i > 0:

<li class="list-group-item" >{{ t }}</li>

Take a look at the answer [here](https://stackoverflow.com/a/41974490) — BogdanC, Aug 17 '17 at 23:17

score 4 · Accepted Answer · answered Aug 17 '17 at 16:52

I like to use [class.####] notation for this sort of thing.

 <li *ngFor="let t of todos; let i = index" 
     class="list-group-item"
     [class.active]="i === 0">{{ t }}</li>

You can also use first.

 <li *ngFor="let t of todos; let i = first" 
     class="list-group-item"
     [class.active]="i">{{ t }}</li>

score 3 · Answer 2 · answered Aug 17 '17 at 16:51

3

you can try this:

<li *ngFor="let t of todos; let i = index" class="list-group-item" [class.active]="i==0" >{{ t }}</li>

answered Aug 17 '17 at 16:51

Surely

1,599
14
22

score 2 · Answer 3 · answered Aug 17 '17 at 16:51

2

<ul class="list-group">
    <li *ngFor="let t of todos; let i = index" class="list-group-item" >
        <span [class.active]="i==0"> {{ t }} </span>  
    </li>
</ul>

answered Aug 17 '17 at 16:51

Aravind

38,787
15
88
108

Are you sure that this is the same? In your case, the li does not have the class "active". Could be a problem if a css code is written for li.active or sth... – ndsvw Aug 17 '17 at 16:55

Angular: use a class with *ngIf

3 Answers3

Linked