Now that you know how to bind a property with className in Angular lets see how we can add a class name only if a condition is true.

Angular provides a shorthand syntax which I absolutely love:

<div [class.headingStyle]="condition"></div>

If the condition is true, the headingStyle class will be added, otherwise it will be removed. You can even use BEM (Block-Element-Modifier) syntax for class names:

<div []="condition"></div>