Property binding with “className” in Angular

In Vanilla Javascript if you want to add a class to an element you can do something like:

const heading = document.querySelector('h1');
heading.className = 'heading-style';

Because in Angular we’re working with templates and bindings instead of DOM APIs, the code above can be done in Angular like this:

<div [className]="headingStyle"></div>

When you run this code, Angular will lookup the JavaScript property of className and bind our expression to it.

Andy

Highly creative and reliable UI Software Engineer and Designer based in Dublin with over 8 years experience currently working at IBM.