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 mandate progressively ties at least one CSS classes to a HTML element.

The estimation of the ng-class mandate can be a string, an article, or an array.

If it is a string, it ought to contain at least one, space-isolated class names.

As an article, it ought to contain key-esteem sets, where the key is a boolean esteem, and the esteem is the class name of the class you need to include. The class might be included if the key is set to true.

As an exhibit, it tends to be a mix of both. Each exhibit component can be either a string, or an article, portrayed as above.


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

Supported by all HTML elements.

Parameter Values

Value Description
expression An articulation that profits at least one class names.