AngularJS ng-class Directive

Definition and Usage

ng-class This directive is used to dynamically bind one or more CSS classes to an HTML element.

ng-class The value of the instruction can be a string, an object, or an array.

If it is a string, it should contain one or more class names separated by spaces.

As 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. The class will only be added when the value is set to true.

As an array, it can be a combination of both. Each array element can be a string or an object as described above.

Example

Change the class of the <div> element:

<select ng-model="home">
    <option value="sky">Sky</option>
    <option value="tomato">Tomato</option>
</select>
<div ng-class="home">
    <h1>Welcome Home!</h1>
    <p>I like it!</p>
</div>

Try It Yourself

Syntax

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

All HTML elements support it.

Parameters