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. |
