Text Color for different status Angular 6
You can use the below
<td *ngFor="let cell of row"
[ngStyle]="{'color': (cell.content === 'Busy') ? 'green' : (cell.content === 'overload') ? 'red' : (cell.content === 'idle') ? 'yellow' : ''}">{{cell.content}}
</td>
The condition should be on cell.content
but not on row.content
You could make use of ngClass with some conditional check on the data while generating the row as follows,
<table class="table\" [ngClass]="modes\">
<thead *ngIf="columns\">
<tr>
<th *ngFor="let col of columns"> {{col.content}} </th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of data">
<td [ngClass]="{
'busy' : cell.content == 'Busy',
'idle' : cell.content == 'Idle'
'overload' : cell.content == 'Overload'
}" *ngFor="let cell of row"> {{cell.content}} </td>
</tr>
</tbody>
</table>
and you should also have a css for the above as,
.busy {
background-color: green;
}
.idle {
background-color: yellow;
}
.overload {
background-color: red;
}