# Class attribute binding

<h3 class=”text-success”>Class Attribute</h3> 

This is hard coded for binding. 

# Class binding with property

Component: public successClass = “text-success”;

<h3 [class]=”successClass”>Class Binding</h3>

# Class binding with multiple class 

Component: classesApply: string = ‘classBold classItalic’;

<h3 [class]=”classesApply”>Multiple classes apply</h3>

# property binding with class

Component: public hasError = true;

<h3 [class.text-danger]=”hasError”>Class Binding</h3>

# property binding with ngClass 

Component:   

addClasses(){

    let classes = {

      classBold: this.applyBoldClass,

      classItalic: this.applyItalicClass

    };

    return classes;

  }

<h3 [ngClass]=”addClasses()”>ngClass Directive by addClass method</h3>

#ngClsss directive

Component:

  public hasError = false;

  public isSpecial = true;

  public messageClasses = {

    “text-success”: !this.hasError,

    “text-danger”: this.hasError,

    “text-special”: this.isSpecial

  }

<h3 [ngClass]=”messageClasses”>ngClass Directive example</h3>

<h3 [ngClass]=”hasError ? ‘messageClasses’ : ‘messageClasses2′”>ngClass using ternary operator</h3>