Dynamically change class

Question

I have an html with ngFor:

<div class="row p-3 border-bottom" *ngFor="let cont of contrib">
  <!-- ! -->
  <div class="col">
    <p [class.text-danger]="redName === true" [class.text-light]="redName === false">{{cont.NOME}}</p>
  </div>
  <!-- ! -->    
</div>

I make a request to see if this count.NAME has data in the database, if it does not have, the name will be in the text-light class, but if it has data, it will be in text-Danger:

for (let index = 0; index < colabs.length; index++) {

      this.service.showResults(colabs[index].FILIAL, colabs[index].MATRICULA).subscribe(
        (res) => {
          let cont = (<any>res).length

          if (cont > 0) {
            //nome fica vermelho
            this.redName = true;

          } else {
            this.redName = false;
          }       

        },
        (err) => console.log(err)
      )

    }

but the names are only getting the text-Danger class, and one of them should stick with text-light. Someone could help me?

Answer 1

Well try to use the ng-class with the if ternary .

<div class="row p-3 border-bottom" *ngFor="let cont of contrib">
  <!-- ! -->
  <div class="col">
    <p ng-class="redName ? 'text-danger' : 'text-light'" >        {{cont.NOME}}</p>
  </div>
  <!-- ! -->    
</div>    

Answer 2

You are changing a variable redName that is being used in an entire array returned in the service. Getting all Danger or light class. For you to compare each item separately, it would be interesting to put a temporary attribute.

no ts:

(res) => {
    const cont = res.length

    if (cont > 0) {
        //nome fica vermelho
        colabs[index]._redName = true;
    } else {
        colabs[index]._redName = false;
    } 

    // ou apenas:
    // colabs[index]._redName = cont > 0;

},

then in your html:

<div class="col">
    <p [class.text-danger]="cont._redName" [class.text-light]="!cont._redName">{{cont.NOME}}</p>
</div>

Answer 3

I found the ideal solution with the help of @Gaspar’s reply

I created a global array and pushed the contributors data and added 1 more data:

  this.arrayColabs.push({
    MATRICULA: colabs[index].MATRICULA,
    CCT: colabs[index].CCT,
    NOME: colabs[index].NOME,
    FILIAL: colabs[index].FILIAL,
    _redName: true
  })
  let cont = (<any>res).length

  if (cont > 0) {
    //nome fica vermelho
    this.arrayColabs[index]._redName = true;
  } else {
    this.arrayColabs[index]._redName = false;
  }

and in html left:

  <div class="row colaboradores" *ngFor="let cont of arrayColabs">

      <div class="col">
        <p [class.text-danger]="cont._redName" [class.text-light]="!cont._redName">{{cont.NOME}}</p>        
      </div>
      <div class="col">
        <button class="btn-primary btn button_visu" (click)="select(cont.FILIAL, cont.MATRICULA)">Visualizar</button>
      </div>
    </div>

Answer 4

Try it this way:

<p [ngClass]="{
     'text-danger': redName,
     'text-light': !redName 
}" >