Latest web development tutorials
 

AngularJS ng-class Directive


Example

Change class of a <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 »

Definition and Usage

The ng-class directive dynamically binds one or more CSS classes to an HTML element.

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

If it is a string, it should contain one or more, space-separated class names.

As an object, it should contain key-value pairs, where the key is a boolean value, and the value is the class name of the class you want to add. The class will only be added if the key is set to true.

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


Syntax

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

Supported by all HTML elements.


Parameter Values

Value Description
expression An expression that returns one or more class names.