AngularJS ng-class Directive
AngularJS Example
Modify 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>
Definition and Usage
The ng-class directive is used to dynamically bind 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, multiple class names are separated by spaces.
If it is an object, it requires key-value pairs where the key is the class name you want to add and the value is a boolean. The class is only added if the value is true.
If it is an array, it can consist of a combination of strings or objects, and the elements of the array can be strings or objects.
Syntax
Supported by all HTML elements.
Parameter Values
| Value | Description |
|---|---|
| expression | The expression returns one or more class names. |