html – Line changes color when value equals false

Question:

I have a list of users and each user can be inactivated or activated. I would like the user when the value is 'false' (disabled) to change the color to gray.

HTML:

<tbody>
       <tr *ngFor="let user of users" >
         <td>{{user.user}}</td>
         <td>{{user.email}}</td>
         <td>
            <button class="btn btn-danger" data-toggle="modal" (click)="getUser(user)" data-target="#exampleModal">Recuperar Senha</button>
         </td>
          <td >
            <button [hidden]="user.active == false" class="btn btn-danger" (click)="desativarUsuario(user)" >Desativar</button>
            <button [hidden]="user.active == true" class="btn btn-danger" (click)="desativarUsuario(user)" >Ativar</button>
          </td>
      </tr>
</tbody>

Answer:

It's not very elegant, but you can put an ngClass in each column ( td ) with a ternary condition.

<tbody>
       <tr *ngFor="let user of users" >
         <td [ngClass]="user.active == false ? 'bg-gray' : 'bg-green'">{{user.user}}</td>
         <td [ngClass]="user.active == false ? 'bg-gray' : 'bg-green'">{{user.email}}</td>
         <td [ngClass]="user.active == false ? 'bg-gray' : 'bg-green'">
            <button class="btn btn-danger" data-toggle="modal" (click)="getUser(user)" data-target="#exampleModal">Recuperar Senha</button>
         </td>
          <td [ngClass]="user.active == false ? 'bg-gray' : 'bg-green'">
            <button [hidden]="user.active == false" class="btn btn-danger" (click)="desativarUsuario(user)" >Desativar</button>
            <button [hidden]="user.active == true" class="btn btn-danger" (click)="desativarUsuario(user)" >Ativar</button>
          </td>
      </tr>
</tbody>

And then just use css to set the background color.

Scroll to Top