AngularJS ng-class Directive

The AngularJS ng-class directive facilitates you to dynamically set CSS classes on an HTML element by databinding an expression that represents all classes to be added. It may be a String, an object or an array.

In case of a string, it should contain one or more, space-separated class names. In case of an object, it should contain key-value pairs, where the key is the class name of the class you want to add, and the value is a Boolean value. In the case of an array, it can be a combination of both.

Note: The ng-class directive is supported by all HTML elements.

Syntax:

Parameter explanation:

expression: It specifies an expression that returns one or more class names.

Let's take an example to demonstrate ng-class directive.

See this example: