How to set a class only to specific elements when using *ngFor?

Question

I am using *ngFor to list table data: *ngFor="let record of records", and I want to set custom css class to record based on some conditions, f.e. if record.name === something. Is this possible?

`[ngClass]="record.name === 'something' ? 'yourClass' : 'otherClass' "` — Roberto Zvjerković, May 14 '18 at 11:51
https://stackoverflow.com/questions/34657821/ngif-and-ngfor-on-same-element-causing-error Can you refer here? — , May 14 '18 at 11:53

Chris · Answer 1 · 2018-05-14T11:59:12.373

2

Yes, you on [ngClass] to achieve this, for example:

<div [ngClass]="{'record': record.name === 'something' }" *ngFor="let record of records">

edited May 14 '18 at 11:59

answered May 14 '18 at 11:51

Chris

4,672
13
52
93

score 0 · Accepted Answer · answered May 14 '18 at 11:54

0

you can try this way :

  <ul class="r " *ngFor="let posto of posti">
    <li [ngClass]="posto.id === something ? NewClass : oldclass" >
     {{Something.id}} 
    </li>
  </ul>

answered May 14 '18 at 11:54

Abhishek Ekaanth

2,511
2
19
40

score 0 · Answer 3 · answered May 14 '18 at 12:05

0

<tr *ngFor="let record of records">    
  <td [ngClass]="record.name === 'something' ? 'classForSomething' : 'classForOthers' ">{{record.name}}</td> 
</tr>

answered May 14 '18 at 12:05

M Rameez

189
1
3
10

How to set a class only to specific elements when using *ngFor?

3 Answers3