# Angular ngClass with multiple conditions

NgClass is the directive that enables Angular to apply a css class to your target element.

<div [ngClass]="{'hidden': isHidden}"></div>

In order to apply multiple class for different conditions, you need to expand the object sent to the ngClass like below.

<div [ngClass]="{'classOne':firstCondition, 'classTwo': secondCondition, 'classThree':thirdCondition}" ></div>

Annother way to do that but not recommended is to use a function in ngClass :

<div [ngClass]="getClass()"></div>

and in the component :

 getClass() {
    if(firstCondition) {
    	return 'classOne';
    } else if (secondCondition) {
    	return 'classTwo';
    else if (thirdCondition) {
    	return 'classThree';
    } else {
    	return null;
    }
  }