Применение динамического CSS к угловому компоненту на основе значения объекта

Question

Есть ли способ в angular, html или css для динамического применения CSS на основе значения объекта:

HTML:

<mat-grid-tile *ngFor="let obj of objs">    
 <span class="(value according to variable)">
   {{ obj.n }}
 </span>
</mat-grid-tile>

CSS:

.first {
  color: #db4437;
}

.second {
  color: #32cd32;
}

Что я хочу сделать, так это если obj.n равен красный , я хочу первый в качестве класса тега span и second => иначе

Answer 1

Попробуйте [ngClass] и оцените выражение

<mat-grid-tile *ngFor="let obj of objs">    
  <span [ngClass]="(obj.n ==='red')? 'first' : 'second'">
  {{ obj.n }}
  </span>
</mat-grid-tile>

Взгляните на эту демонстрацию

Answer 2

или

<span [class.first]="obj.n === 'red'" [class.second]="obj.n !== 'red'">{{obj.n}}</span>