Angular Material Table - Apply dynamically background color to a row (Angular 2+)

You can also use [ngClass] to achieve this:

<td [ngClass]="{
  'is-white': data.STATUS === 'S',
  'is-blue': data.STATUS === 'W',
  'is-red': data.STATUS === 'E',
  'is-green': data.STATUS === 'F'
}">...</td>

And then in your css:

td.is-white {
    background: ...;
}

Et voilà ! Hope it helps to understand that you can achieve this with different solution.

EDIT

To your use, juste use the [ngClass] in the second <tr>

<tr mat-row *matRowDef="let element; columns: displayedColumns;" class="example-element-row"
  [class.example-expanded-row]="expandedElement === element"
  [ngClass]="{
  'is-white': element.STATUS === 'S',
  'is-blue': element.STATUS === 'W',
  'is-red': element.STATUS === 'E',
  'is-green': element.STATUS === 'F'
}" (click)="log_message = onElementExpand(element); expandedElement = element;"></tr>

You can achieve this by using [ngStyle] on

<td mat-cell *matCellDef="let data" [ngStyle]="{'background-color': data.STATUS == 's' ? 'white': data.STATUS == 'w' ? 'blue' : data.STATUS == 'e' ? 'Red' : data.STATUS == 'f' ? 'green' : ''}"> {{data.STATUS}} </td>

and my answer is not perfect as in this case you need to repeat [ngStyle] on every td

Add the attribute with the value of a status and then write CSS for that attribute

e.g: HTML

<tr [attr.row_status]="data.STATUS" /></tr>

So when view will get rendered your HTML will look like this:

<tr row_status="S"></tr>

Now add CSS for the selector:

[row_status="S"] {
   background: #fff
}

let me know if you are still facing the issue. And possibly share the code next time through snippet.

Cheers :)