Angular ng-class Directive

AngularJS ng-class Directive


Change class of a <div> element:

<select ng-model="home">
    <option value="sky">Sky</option>
    <option value="tomato">Tomato</option>

<div ng-class="home">
    <h1>Welcome Home!</h1>
    <p>I like it!</p>
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 the class name of the class you want to add, and the value is a boolean value. The class will only be added if the value 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.


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

Supported by all HTML elements.

Parameter Values

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