[ngClass] directive

This is the documentation for Angular 6.
You can switch to the latest version Angular 7.

Adds and removes CSS classes on an HTML element.

The CSS classes are updated depending on the type of the expression evaluation.

String

The CSS classes listed in the string (space delimited) are added.

Source
<div [ngClass]="'bold italic'">
  Text in this div is bold and italic.
</div>
.bold {
  font-weight: 600;
}

.italic {
  font-style: italic;
}
Result
Text in this div is bold and italic.

Array

The CSS classes declared as Array elements are added.

Source
<div [ngClass]="['bold', 'italic']">
  Text in this div is bold and italic.
</div>
.bold {
  font-weight: 600;
}

.italic {
  font-style: italic;
}
Result
Text in this div is bold and italic.

Object

Keys are CSS classes that get added when the expression given in the value evaluates to a truthy value, otherwise they are removed.

Source
<div [ngClass]="{bold: true, italic: false}">
  Text in this div is bold and not italic.
</div>
.bold {
  font-weight: 600;
}

.italic {
  font-style: italic;
}
Result
Text in this div is bold and not italic.