View source Improve this doc

ngClass
directive in module ng

Description

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.

Usage

as attribute
<ANY ng-class="{expression}">
   ...
</ANY>
as class
<ANY class="ng-class: {expression};">
   ...
</ANY>

Animations

  • add - happens just before the class is applied to the element
  • remove - happens just before the class is removed from the element
Click here to learn more about the steps involved in the animation.

Parameters

ParamTypeDetails
ngClassexpression

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

Example that demostrates basic bindings via ngClass directive.

Source




















Demo




Animations


Example that demostrates how addition and removal of classes can be animated.


Source

























  
Demo