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.


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