There are two ways to conditionally use a class with ngClass in an Angular 4 application.

The first is a no brainer:

<some-element [ngClass]="isWhatever ? 'second' : 'third'">

 
 

The second is a little more strange. You may use an object wherein the property names are the classes and the classes will only be shown if the value for a property is truthy like so:

<some-element [ngClass]="{'first': true, 'second': isWhatever, 'third': !isWhatever}">

 
 

The class names enclosed in single quotes in both scenarios may be a series of class names separated by spaces too.