Changing angular 6 Row Colour according to condition

Question

I am currently working with angular 6 and I have to make lines of a table change according to the content of the row.

So i am using conditional statement with ngif . I am wondering if there is a way to do that without making 2 Ngif statements?

Answer 1

You don't need angular or javascript - just CSS - the following uses the :nth-of-type(even) selector.

Only the tr's that satisfy your ngIf condition will show and this stylning will be applied to every second row irrespective of the number of rows that don't show.

 table { display: block; width: 100%; } tr:nth-of-type(even) { background: yellow; color: blue; }

 <table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>David</td> <td>Griffith</td> <td>50</td> </tr> </table>

Answer 2

I found out how to do it with ngStyle:

[ngStyle]
  <li  [ngStyle]= "{ 'backgroundColor' : (film.duree=='2 heures') ? 'blue' : 'red'  }">  {{ film.nom}}-   {{ film.duree}}-  {{ film.categorie}}</li>

Answer 3

除了直接标记样式之外，如果提供谓词，您可以使用 Angular 属性绑定轻松切换包含样式信息的类：

<li [class.my-class]="condition">data</li>