Working with Angular Class Binding Example

 Angular class binding is a technique used by angular to apply a css class for any element dynamically.

The dynamic classes are bound to elements by using ng class directive.

The ng class directive is used as a dynamic property for element that can refer to className.

The css classes are refered in three ways

1 String Type : It is used when you have to define any specific css class.

<div  [ngclass]="className" >

2 Refer as an Array

It is used when you have to define multiple css classes to element.

Example

<div [ngclass]="[class1','class2'......]">

3 Refer as an object

It is used when you want to turn on or off classes dynamically.

Dynamically Adding css classes to any Element.

Add a new component

.ts file changes

@Component({

  selector: 'app-classbinding',

  templateUrl: './classbinding.component.html',

  styleUrls: ['./classbinding.component.css']

})

export class ClassbindingComponent {

public effects: any

public isBackStyle:any;

public isTextStyle:any;

public isBorderStyle:any;

}

ScreenShot

Html Changes

<fieldset>

    <legend> Type Effects</legend>

    <input [(ngModel)]="effects"

    placeholder="eg:backEffects,textEffects,borderEffects" type="text"

    size="45">

</fieldset>

<br/>

<h2 [ngClass]="effects"> Angular </h2>

<fieldset>

    <legend> Choose Effects</legend>

    <ul>

        <li> <input [(ngModel)]="isBackStyle" type="checkbox">Back Effects</li>

        <li> <input [(ngModel)]="isBorderStyle" type="checkbox">Border Effects</li>

        <li> <input [(ngModel)]="isTextStyle" type="checkbox">Text Effects</li>

    </ul>

</fieldset>

<h2 [ngClass]="{backEffects:isBackStyle,textEffects:isTextStyle,borderEffects:isBorderStyle } ">

    SampleText

</h2>

appModule.ts

index.html

Output