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 to each headline. We are going to create a stripped style for headlines.