Use and example of ngClass in AngularJS

ngClass directive let us add the CSS class at run time.We will understand this by use and example of ngClass in AngularJS.This is useful in many scenarios:

• Suppose we want to add a particular class when a control is disabled and other CSS class when the control is enabled the we can use boolean expression with ngClass
• If we want to specify class names we can specify class names as comma separated values.
• A common use is specifying an object with a string key and boolean value.In such case the string key will be used if
  the boolean value is true.

In the following example employeeClass CSS class will be applied to div if the IsEmployee variable is true

<div ng-class="{employeeClass:IsEmployee}"></div>

We can even specify multiple boolean conditions.In such case the corresponding classes will be applied if the variable is true

ng-class="{employeeClass:IsEmployee,consultantClass:IsConsultant}"

We can bound the IsEmployee and IsConsultant variables to a control such as checkbox

<input type="checkbox" ng-model="IsConsultant">
<input type="checkbox" ng-model="IsEmployee">

We can define the classes corresponding to the two variables as:

.employeeClass {
font-weight: bold;

}
.
consultantClass {
font-weight: normal;

}

 

Follow on: