CODEWITHSUNDEEP
javascriptangular
Jack23
Jack23

Reputation: 1396

Angular change color of a cell with condition

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??

Upvotes: 0

Views: 422

Answers (1)

JSON Derulo
JSON Derulo

Reputation: 17568

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}"

Upvotes: 1

Related Questions