Angular Services

Class binding

Other types of property binding includes, class binding--where you bind a specific CSS class to a DOM element based on a given expression. For example, we can define a new isContainer property in our class as follows:

// app/collector/collector.component.ts 
//... 
export class CollectorComponent { 
  //... 
  isContainer = "true"; 
 //... 
} 

Then modify the template to add a CSS class based on the property defined inside the component:

# app/collector/collector.html 
<div [class.container]="isContainer"> 
  #... 
</div> 

If you inspect the code in your browser, you will see it has the same effect as before, except now we create it via property binding.

Let's take the current template one step further and use style binding to apply different styles ...