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

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

Example that demostrates basic bindings via ngClass directive.

#### Source

## Demo

## Animations

The example below demonstrates how to perform animations using ngClass.

## Source

## Demo

## ngClass and pre-existing CSS3 Transitions/Animations

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.