AngularJS ng-class Directive

The ng-class Directive in AngularJS is used to specify the CSS classes on HTML elements. It is used to dynamically bind classes on an HTML element. The value for the ng-class has either string, an object, or an array. It must contain more than one class name, which is separated by space, in the case of a string. If it is an object, it will contain the key-value pairs, where the key represents the class name for the class that wants to add & value represent the boolean value. If the expression inside the ng-class directive returns true then only the class is added else it is not added. If the value of ng-class is an array then it can be the combination of both strings as well as an array. It is supported by all HTML elements. 

Syntax:

<element ng-class="expression"> 
 Contents... 
</element>

Example 1: This example uses the ng-class Directive to set and reset the CSS class. 

Output:

Example 2: This example uses the ng-class Directive to set the CSS style to the class. 

Output: