Search code examples
angularclassng-class

Angular - ng-class or class


i would like to know, whats the real benefit of using ngClass/[ngClass] instead of class in Angular? Are there any performance differences?

<div class="foobar">text</div>

or

<div ngClass="foobar">text</div>

Solution

  • *If you want to add class, use class as below.

    class="className"  
    

    *If you want to add one class conditionally, you can use class/ngClass in angular as below.

    [class.className]="condition"  
    [ngClass]="{'className': condition}"
    

    *If you want to add more than one class conditionally, you have two way.

    Way 1: Use class in angular as below:

    [class.className1]="condition1"  
    [class.className2]="condition2"
    .
    .
    .
    

    Way 2: Use ngClass in angular as below:

    [ngClass]="{'class1': condition1 , 'class2': condition2 ... }"
    

    And clearly the 2nd way is better than the 1st. Phew !!