How to change color of text in a table cell based on value in Angular?

Question

I have the following table where the ESTADO field is a drop-down list that shows the possible statuses. I want the text of the td element of the ESTADO field to display a different color when entering the screen, depending on the value it brings

I added the property [ngClass] into a option and the only thing it does is paint the text but inside the dropdown list but what I want is to show the color of the text of the td

 <table class="table table-striped">
        <thead>
            <tr>
                <th scope="col">ID</th>
                <th scope="col">ESTADO</th>
                <th scope="col">COMENTARIO</th>
                <th scope="col">HORA INICIO</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let contr of control">
                <td>{{contr.id}}</td>
                <td>
                    <select class="select" (change)="onChangeList($event, contr)">
                        <option value="0">{{contr.cveEstado}}</option>
                        <option *ngFor="let estatus of estadoModel" [value]="estatus.cveEstado" [ngClass]="{'text-red':estatus.cveEstado == 'ERR', 'text-blue':estatus.cveEstado == 'INP', 'text-orange':estatus.cveEstado== 'PDD'}">
                            {{estatus.descripcionEstado}}
                        </option>
                    </select>
                </td>
                <td>{{contr.comentario}</td>
                <td>{{contr.horaInicio}}</td>
            </tr>
        </tbody>
    </table>

I tried adding the property [ngClass] in the line

<tr *ngFor="let control of controlEjecucion" [ngClass]="{'text-red':estatus.cveEstado == 'ERR', 'text-blue':estatus.cveEstado == 'INP', 'text-orange':estatus.cveEstado== 'PDD'}">

but it does not work, it does nothing, in the same way I tried to add [ngStyle] and it does nothing

this is the css

.select-css {
    background: transparent;
    border: none;
    font-size: 17px;
    height: 30px;
    padding: 5px;
    width: 200px;
}


.text-red { 
    color:red;
 }

 .text-blue{
    color:blue;
 }

 .text-orange{
   color: orange;
 }

 .text-black{
    color: black;
 }

 .text-green{
    color: green
 }

Can someone please tell me what I'm doing wrong, or how I can get the text of the td element to show color

Answer 1

I am not sure that ngClass works on selectbox options. Have you tried using ngStyle instead?

Answer 2

You can use the attribute selector in CSS. Your select must be:

<select class="select" (change)="onChangeList($event, contr)">
    <option value="0">{{contr.cveEstado}}</option>
    <option *ngFor="let estatus of estadoModel" [value]="estatus.cveEstado">
        {{estatus.descripcionEstado}}
    </option>
</select>

And your CSS should look like this:

{
    option[value="ERR"] {
        background-color: #f1f1f1;
    }

    option[value="INP"] {
        background-color: #a1a1a1;
    }

    option[value="PDD"] {
        background-color: #f1f1f1;
    }
}

Answer 3

When we use Angular, we need think in "variables". The variables in the .ts makes that the appearance of the .html change.

To change the .html based in variables in .ts we using interpolation or binding in one way, e.g.

{{myvariable}} //<--interpolation
[class.red]="variable"  //<--one way binding

When we use an input and we want relationate the value of the input with the variable we use two way binding. The easer way to use two way binding is use [(NgModel)]

So, We can join this two concepts, two way binding and one binding

//In ts
variable:string="red"
//In .html
<input [(ngModel)]="variable">
{{variable}}
<div [style.color]="variable">See my color</div>

Well, if we can understand the above e.g. we can aboard your question. Before check the ways to binding the class and styles and the use of ngClass and ngStyle

<td [ngClass]="'text-red':contr.cveEstado=='ERR',
               'text-orange':contr.cveEstado=='INP',
               'text-green':contr.cveEstado=='PDD'"
>
   <select [(ngModel)]="contr.cveEstado">
     ...
   </select>
</td>

Well, we can simplify if we define a variable in our .ts

    statusColor={
          'ERR':'text-red',
          'INP':'text-orange',
          'PDD':'text-green'
        }

And we can use

<td [class]="statusColor[contr.cveEstado]">
   ...
</td>