Change the color of a specific row with angular and/or botstrap

Issue

Good morning, I have a table, which I want to change the background color of a specific row according to a criteria, how do I do it?

I want to paint all the cells that have as attribute Prioridad= Urgente, i am using angular cli 7.3

my code html:

<div class="table table-responsive table-striped">
            <table class="table table-hover table-bordered table-sm">
              <caption>Lista de Pedidos</caption>
              <thead class="thead-dark">
                <tr>
                  <th class="text-center" scope="col">#</th>
                  <th class="text-center" scope="col">Linea</th>
                  <th class="text-center" scope="col">PartNumber</th>
                  <th class="text-center" scope="col">Estado</th>
                  <th class="text-center" scope="col">Prioridad</th>
                  <th class="text-center" scope="col">Feeder</th>
                  <th class="text-center" scope="col">Hora</th>
                  <th class="text-center" scope="col" 
    colspan="2">Acción</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor='let pedido of pedidos; let i = index' [ng- 
         class]="{'resaltado': pedido.prioridad == 'Urgente'}">
                  <td class="align-middle text-center"><strong>{{i + 1}} 
        </strong></td>
                  <td class="align-middle text-center">{{ pedido.linea 
       }}</td>
                  <td class="align-middle text-center">{{ pedido.part_number }}</td>
                  <td class="align-middle text-center">{{ pedido.estado }}</td>
                  <td class="align-middle text-center">{{ pedido.prioridad }}</td>
                  <td class="align-middle text-center">{{ pedido.feeder }}</td>
                  <td class="align-middle text-center">{{ pedido.created_at }}</td>
                  <td class="text-center"><button type="button" class="btn btn-success">Aceptar</button></td>
                </tr>
              </tbody>   
            </table> 
        </div>

[ng-class]="{'resaltado': pedido.prioridad == 'Urgente'}", it doesn't work for me

Solution

You need to change [ng-class]="{'resaltado': pedido.prioridad == 'Urgente'}"> to [ngClass]="{'resaltado': pedido.prioridad == 'Urgente'}">

See the change that ng-class is for angularjs and from Angular 2 (the new framework of angular uses [ngClass].

Another tip is to also use strict comparison with === instead of ==.

Answered By - Andres Ceron