---
title: "Adding multiple class using ng-class"
description: "Adding multiple class using ng-class"
author: "Revati S Misra"
published: 2024-06-17
updated: 2024-06-18
canonical: https://www.mindstick.com/forum/160751/adding-multiple-class-using-ng-class
category: "angular js"
tags: ["javascript", "angular js", "angularjs ng-class"]
reading_time: 3 minutes
---
# Adding multiple class using ng-class
[Adding multiple](https://www.mindstick.com/forum/33435/adding-multiple-views-to-view-controller-inside-a-tab-controller) [class](https://www.mindstick.com/blog/165/generic-class-in-c-sharp) using ng-class
## Replies
### Reply by Ashutosh Patel
### Add multiple classes using `ng-class`
In AngularJS, you can use the `ng-class` directive to dynamically apply [multiple](https://www.mindstick.com/blog/12797/iowa-is-expected-to-see-heavy-growth-in-multiple-sectors) classes to an element based on expressions in your controller or directly in your template.
Here’s how you can do this.
#### Use object syntax
You can use object syntax with ng-class where each key is a class name and its value is a boolean expression indicating whether the class should be used.
```html
```
## in the above syntax
class1, class2, and class3 are optional class names.\
condition1, condition2, and condition3 are boolean expressions that specify the scope of your controller indicating whether each class should be used (true) or not (false).
## Example
## HTML
```html
```
## Controller
```plaintext
$scope.isError = true;
$scope.isImportant = false;
$scope.isItalic = true;
```
In this case `
` have **red** and **italic** classes, because `isError`and `isItalic`are **true**, `isImportant`is **false**.
#### Array Syntax
You can also use an array syntax with `ng-class` where each element in the array is a class name added with no entry.
```html
```
## Example-
```html
```
## In the example above
'`alert`' and '`alert-`' + **type** are added with nothing as class.\
`{ 'alert-dismissible': dismissible }` There is an object to add the **alert-dismissible** class if `dismissible`evaluates to `true`.
#### Combining Methods
You can also combine both methods for more flexibility.
```html
```
## In the example above
`class1` is added unconditionally.\
`class2` is added if **condition2** evaluates to true.\
`class3` is added unconditionally.
## Example-
here is a simple example to add/remove multiple classes using `ng-class`
```html
Apply Filter Example