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

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