[ng-class]Add multiple classes with a single condition

Question

Is it possible to add multiple classes with [ng-class] with a single condition?

Something like this:

<div [ngClass]="Cond ? 'class1, class2' : 'class3, class4'"></div>

Does this answer your question? [Multiple conditions in ngClass - Angular 4](https://stackoverflow.com/questions/44821875/multiple-conditions-in-ngclass-angular-4) — Daniel Habenicht, Dec 01 '20 at 12:09

score 5 · Accepted Answer · answered Dec 01 '20 at 12:09

5

As specified in: https://angular.io/api/common/NgClass#description You can: <some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>

answered Dec 01 '20 at 12:09

Eli

1,302
1
17
21

score 2 · Answer 2 · edited Dec 01 '20 at 16:14

2

You can do this:

<div [ngClass]="{'class1 class2' : condition, 'class3': !condition"}></div>

edited Dec 01 '20 at 16:14

bpardo

351
3
9

answered Dec 01 '20 at 12:09

Mathieu Seiler

677
7
12

score 1 · Answer 3 · answered Dec 01 '20 at 12:14

1

You have it almost right, just ditch the commas:

<div [ngClass]="Cond ? 'class1 class2' : 'class3 class4'"></div>

Try it on stackblitz.com - I wrote an example.

answered Dec 01 '20 at 12:14

kvetis

5,696
1
24
41

score 0 · Answer 4 · answered Dec 01 '20 at 12:17

It is very easy. Steps

Create a boolean for controlling the class binding condition

public hasError: boolean = false;

Create an object with class names as follows

public classObj: any = {
    "classA": !this.hasError,
    "classB": this.hasError,
    "classC": !this.hasError,
    // how much ever class you want
}

Finally use ngClass directive for binding the classObj

<h2 [ngClass]="classObj">Hey, I have a lot of classes!</h2>

[ng-class]Add multiple classes with a single condition

4 Answers4