Line changes color when value is false

Question

I have a list of users and each user can be inactivated or activated. I would like the user when '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 1

It’s not very stylish, but you can put an ngClass in each column (td) on 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.