title: Angular 5 ngClass with a if
body: <p>This is my code for a row in a table</p>
  
  <pre><code>  &lt;tr class="user-item" *ngFor="let device of group.devices" (click)="$event.stopPropagation()" ngClass="device.onlineState == 'Offline' ? 'highlight' : 'highlight2'"&gt;
      &lt;td class="qkFix"&gt;{{ device.deviceId }}&lt;/td&gt;
      &lt;td class="qkFix"&gt;{{ device.alias }}&lt;/td&gt;
      &lt;td class="qkFix" *ngIf="device.onlineState == 'Online'" ngClass="colorOnline"&gt;{{ device.onlineState }}
        &lt;span class="dotOnline"&gt;&lt;/span&gt;
      &lt;/td&gt;
      &lt;td class="qkFix" *ngIf="device.onlineState == 'Offline'" ngClass="colorOffline"&gt;{{ device.onlineState }}
        &lt;span class="dotOffline"&gt;&lt;/span&gt;
      &lt;/td&gt;
      &lt;td class="qkFix"&gt;
        &lt;button type="button" class="btn btn-default btn-xs" (click)="$event.stopPropagation(); showDevice(device); editDeviceDialog()"&gt;
          &lt;i class="material-icons"&gt;{{ (auth.hasPermissions(['update-devices'], true)) ? 'edit' : 'open_in_new'}}&lt;/i&gt;
        &lt;/button&gt;
        &lt;button [disabled]="!(auth.hasPermissions(['delete-devices'], true))" type="button" class="btn btn-default btn-xs" (click)="$event.stopPropagation();deleteDevice(device)"&gt;
          &lt;i *ngIf="(auth.hasPermissions(['delete-devices'], true))" class="material-icons" (click)="$event.stopPropagation();deleteDevice(device)"&gt;delete&lt;/i&gt;
          &lt;i *ngIf="!(auth.hasPermissions(['delete-devices'], true))" class="material-icons" (click)="$event.stopPropagation()"&gt;delete&lt;/i&gt;
        &lt;/button&gt;
        &lt;button *ngIf="device.onlineState == 'Online'" [disabled]="!(auth.hasPermissions(['remote-control'], true))" type="button" class="btn btn-default btn-xs" (click)="$event.stopPropagation(); remoteSession(device)"&gt;
          &lt;i *ngIf="(auth.hasPermissions(['remote-control'], true))" (click)="$event.stopPropagation();remoteSession(device)" class="material-icons"&gt;swap_horiz&lt;/i&gt;
          &lt;i *ngIf="!(auth.hasPermissions(['remote-control'], true))" (click)="$event.stopPropagation()" class="material-icons"&gt;swap_horiz&lt;/i&gt;
        &lt;/button&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  </code></pre>
  
  <p>Specific ngClass code</p>
  
  <pre><code>ngClass="device.onlineState == 'Offline' ? 'highlight' : 'highlight2'"
  </code></pre>
  
  <p><strong>I want the row to have the class</strong> <code>highlight</code> <strong>if the onlineState of that device is  Offline.</strong> <code>device.onlineState either returns Online or Offline</code>. <strong>If the onlineState is Online it shouldn't have a class.</strong></p>