Web development blog for Html, CSS, javascript, JQuery developers. At Kodecrash you will find best solution for complex problems.

Multiple ng-class in angular JS

Posted in Angular JS

The ng-class directive is used every time you need to dynamically apply a class to an element by providing the name of the class in a data-binding expression. We can add multiple classes based on the multiple conditions in angular JS.

Here is the example demonstrating adding multiple ng-class directive:

<div ng-class="{'class1': expression1,'class2':expression2}"> ... </div>

Add class using ternary operator:

   <div ng-class="expression?'className1':'className2'"> ... </div>

For example, if you want to add active class to your menu when menu button is clicked & toggle class when menu button is clicked again then refer example below.

   <div ng-class="menuActive?'active':''"> ... </div>

In above case, menuActive is a scope variable & it is toggled when menu button is clicked. When menuActive is clicked active class is added to the menu & when it is clicked again active class is removed. It is very similar to JQuery addClass & removeClass methods.