Property binding with “class” in Angular

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 [class.link-active]="condition"></div>
   

Andy

Front-end Engineer & Designer based in Dublin currently working @IBM.
I write about: Javascript, HTML, CSS, React JS, React Native and UI/UX Design.

Add comment