ngClass
ng
The ngClass allows you to set CSS classes on HTML an element, dynamically, by databinding
an expression that represents all classes to be added.
The directive won't add duplicate classes if a particular class was already set.
When the expression changes, the previously added classes are removed and only then the new classes are added.
<ANY ng-class="{expression}">
...
</ANY>
as class<ANY class="ng-class: {expression};">
...
</ANY>
| Param | Type | Details |
|---|---|---|
| ngClass | expression | Expression to eval. The result of the evaluation can be a string representing space delimited class names, an array, or a map of class names to boolean values. In the case of a map, the names of the properties whose values are truthy will be added as css classes to the element. |
Example that demostrates basic bindings via ngClass directive.
The example below demonstrates how to perform animations using ngClass.
The ngClass directive still supports CSS3 Transitions/Animations even if they do not follow the ngAnimate CSS naming structure. Therefore, if any CSS3 Transition/Animation styles (outside of ngAnimate) are set on the element, then, if a ngClass animation is triggered, the ngClass animation will be skipped so that ngAnimate can allow for the pre-existing transition or animation to take over. This restriction allows for ngClass to still work with standard CSS3 Transitions/Animations that are defined outside of ngAnimate.