[class.] binding

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

You can add and remove CSS class names from an element's class attribute with a class binding.

Class binding syntax resembles property binding. Instead of an element property between brackets, start with the prefix class, optionally followed by a dot (.) and the name of a CSS class: [class.class-name].

You can replace that with a binding to a string of the desired class names; this is an all-or-nothing, replacement binding:

Source
<div class="bold italic red"
     [class]="textClass">
  Demo text
</div>
export class AppComponent {
  textClass = 'bold italic';
}
.bold {
  font-weight: 600;
}

.italic {
  font-style: italic;
}
Result
Demo text

Finally, you can bind to a specific class name. Angular adds the class when the template expression evaluates to truthy. It removes the class when the expression is falsy.

Source
<div [class.special]="isSpecial">
  The class binding is special
</div>

<div class="special"
     [class.special]="!isSpecial">
  This one is not so special
</div>
export class AppComponent {
  isSpecial = true;
}
.special {
  background: #36cadb;
  color: #ffffff;
}
Result
The class binding is special
This one is not so special

While this is a fine way to toggle a single class name, the NgClass directive is usually preferred when managing multiple class names at the same time.