CODEWITHSUNDEEP
angular
idontunderstandarrays
idontunderstandarrays

Reputation: 351

Angular 5 ngClass with a if

This is my code for a row in a table

  <tr class="user-item" *ngFor="let device of group.devices" (click)="$event.stopPropagation()" ngClass="device.onlineState == 'Offline' ? 'highlight' : 'highlight2'">
    <td class="qkFix">{{ device.deviceId }}</td>
    <td class="qkFix">{{ device.alias }}</td>
    <td class="qkFix" *ngIf="device.onlineState == 'Online'" ngClass="colorOnline">{{ device.onlineState }}
      <span class="dotOnline"></span>
    </td>
    <td class="qkFix" *ngIf="device.onlineState == 'Offline'" ngClass="colorOffline">{{ device.onlineState }}
      <span class="dotOffline"></span>
    </td>
    <td class="qkFix">
      <button type="button" class="btn btn-default btn-xs" (click)="$event.stopPropagation(); showDevice(device); editDeviceDialog()">
        <i class="material-icons">{{ (auth.hasPermissions(['update-devices'], true)) ? 'edit' : 'open_in_new'}}</i>
      </button>
      <button [disabled]="!(auth.hasPermissions(['delete-devices'], true))" type="button" class="btn btn-default btn-xs" (click)="$event.stopPropagation();deleteDevice(device)">
        <i *ngIf="(auth.hasPermissions(['delete-devices'], true))" class="material-icons" (click)="$event.stopPropagation();deleteDevice(device)">delete</i>
        <i *ngIf="!(auth.hasPermissions(['delete-devices'], true))" class="material-icons" (click)="$event.stopPropagation()">delete</i>
      </button>
      <button *ngIf="device.onlineState == 'Online'" [disabled]="!(auth.hasPermissions(['remote-control'], true))" type="button" class="btn btn-default btn-xs" (click)="$event.stopPropagation(); remoteSession(device)">
        <i *ngIf="(auth.hasPermissions(['remote-control'], true))" (click)="$event.stopPropagation();remoteSession(device)" class="material-icons">swap_horiz</i>
        <i *ngIf="!(auth.hasPermissions(['remote-control'], true))" (click)="$event.stopPropagation()" class="material-icons">swap_horiz</i>
      </button>
    </td>
  </tr>

Specific ngClass code

ngClass="device.onlineState == 'Offline' ? 'highlight' : 'highlight2'"

I want the row to have the class highlight if the onlineState of that device is Offline. device.onlineState either returns Online or Offline. If the onlineState is Online it shouldn't have a class.

Upvotes: 2

Views: 1388

Answers (3)

Aniket kale
Aniket kale

Reputation: 677

Try with ngClass in brackets i.e. [ngClass]. For more details.

Answer:

 [ngClass]="device.onlineState == 'Offline' ? 'highlight' : 'highlight2'"

If you want to add multiple classes you can do like this:

option1: 

 [ngClass]="condition ? 'class1 class2 class3' : 'class4 class5 class6'"

Option2:

[ngClass]="{'class1': condition1, 'class2': Condition2}"

Upvotes: 5

Olivier Cadoz
Olivier Cadoz

Reputation: 116

ngClass is a directive that accept an object as argument with the name of your classes as properties and conditions as values, exemple:

[ngClass]="{'highlight': device.onlineState === 'Offline'}"

You add multiple classes like this:

[ngClass]="{'highlight other-class': device.onlineState === 'Offline'}"

or

[ngClass]="{'highlight': device.onlineState === 'Offline', 'other-class': condition}"

Upvotes: 2

Al-Mothafar
Al-Mothafar

Reputation: 8219

You can do something like:

  [class.highlight]="device.onlineState == 'Offline'"

And you already have to do [ngClass] instead of ngClass to allow the execution of the expression.

Upvotes: 2

Related Questions