Line changes color when value is false

Question

Line changes color when value is false

Navigation

#1 by (2 votes)

2

I have a list of users and each user can be disabled or enabled. I would like the user to set the 'false' value 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>

html css angular

asked by anonymous 06.11.2017 / 21:47

1 answer

I can not sort table rows Dateadd Hours - SQL Server

score 2 · Accepted Answer

It's not very elegant, but you can put a 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.