Angular change color of a cell with condition

Issue

I have a table and I should change the background color in some conditions:

<tbody class="custom-cells">
                  <tr *ngFor="let offer of offers" class="{{offer.step}}"
                    [ngStyle]="{'background-color': offer.status && offer.status=== 'error' ? red : null}"> // I have tried like this but doesn't works
                    
                    <td class="columnStyle">{{offer.date | date:'dd/MM/yyy'}}</td>
                    <td class="columnStyle grid"> {{offer.customer}} </td>
                    <td class="columnStyle"> {{offer.code}} </td>
                    <td class="columnStyle">{{offer.catalog ? offer.catalog : ''}}</td>
                    </td>
                  </tr>
                </tbody>

my offer status can be: error, ok, waiting.

How can I change the background of the row with the status.offer??

Solution

You have an undefined variable red in your template. If you want to use the CSS value "red", you need to use quotes:

[ngStyle]="{'background-color': offer.status && offer.status === 'error' ? 'red' : null}"

Answered By - JSON Derulo