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