Multiple conditions in ngClass - Angular 4

Question

How to use multiple conditions for ngClass? Example:

<section [ngClass]="[menu1 ? 'class1' : '' || menu2 ? 'class1' : '' || (something && (menu1 || menu2)) ? 'class2' : '']">

something like this. I got same class for 2 menus, and I need class when one of those menus is true and 'something' is true. Hope I explained well enough

score 163 · Accepted Answer · edited Oct 14 '20 at 14:54

You are trying to assign an array to ngClass, but the syntax for the array elements is wrong since you separate them with a || instead of a ,.

Try this:

<section [ngClass]="[menu1 ? 'class1' : '',  menu2 ? 'class1' : '', (something && (menu1 || menu2)) ? 'class2' : '']">

This other option should also work:

<section [ngClass.class1]="menu1 || menu2" [ngClass.class2] = "(menu1 || menu2) && something">

score 82 · Answer 2 · edited Mar 05 '20 at 08:06

82

you need object notation

<section [ngClass]="{'class1':condition1, 'class2': condition2, 'class3':condition3}" >

ref: NgClass

edited Mar 05 '20 at 08:06

Kondal

2,870
5
26
40

answered Jun 29 '17 at 09:59

dee zg

13,793
10
42
82

Gourav Pokharkar · Answer 3 · 2022-09-14T17:46:37.773

20

<section [ngClass]="{'class1': expression1, 'class2': expression2, 'class3': expression3}">

Don't forget to add single quotes around class names.

edited Sep 14 '22 at 17:46

answered Jun 29 '17 at 10:07

Gourav Pokharkar

1,568
1
11
33

score 17 · Answer 4 · answered Dec 06 '17 at 04:39

17

There are multiple ways to write same logic. As it mentioned earlier, you can use object notation or simply expression. However, I think you should not that much logic in HTML. Hard to test and find issue. You can use a getter function to assign the class.

For Instance;

public getCustomCss() {
    //Logic here;
    if(this.x == this.y){
        return 'class1'
    }
    if(this.x == this.z){
        return 'class2'
    }
}
<!-- HTML -->
<div [ngClass]="getCustomCss()"> Some prop</div>

//OR

get customCss() {
    //Logic here;
    if(this.x == this.y){
        return 'class1'
    }
    if(this.x == this.z){
        return 'class2'
    }
}
<!-- HTML -->
<div [ngClass]="customCss"> Some prop</div>

answered Dec 06 '17 at 04:39

xdeepakv

7,835
2
22
32

never use getters inside the template, if there are props that are passed to this "child" component from its parent, angular will execute the getter each time to check if the data was changed. – Mehdi Fracso Jun 02 '20 at 07:51
that is wat you want.. isn't it ?? whenever data change, check for condition ... – xdeepakv Jun 02 '20 at 19:29
how about passing a param in the func ? Lets say that method is in a *ngfor – Gel Oct 18 '21 at 15:16

score 12 · Answer 5 · answered Feb 06 '19 at 08:30

12

<a [ngClass]="{'class1':array.status === 'active','class2':array.status === 'idle','class3':array.status === 'inactive',}">

answered Feb 06 '19 at 08:30

Narasimhamurthy G N

145
1
12

score 8 · Answer 6 · answered May 12 '21 at 21:12

you can use specific class instead of use [ngClass] .Please note that in the second example I have used the age variable as an expiation purpose .

Example 1:

<section
    [class.class1]="menu1"
    [class.class2]="menu2"
    [class.class3]="menu3">
    </section>

Example 2:

   <section
    [class.class1]="age > 20"
    [class.class2]="age < 50"
    [class.class3]="age == 4">
    </section>

Md. Abu Sayed · Answer 7 · 2020-01-21T06:04:37.800

2

I hope this is one of the basic conditional classes

Solution: 1

<section [ngClass]="(condition)? 'class1 class2 ... classN' : 'another class1 ... classN' ">

Solution 2

<section [ngClass]="(condition)? 'class1 class2 ... classN' : '(condition)? 'class1 class2 ... classN':'another class' ">

Solution 3

<section [ngClass]="'myclass': condition, 'className2': condition2">

edited Jan 21 '20 at 06:04

answered Apr 09 '19 at 10:42

Md. Abu Sayed

2,396
2
18
26

1

Worked for me !! – Sarjerao Ghadage Jan 20 '20 at 09:55
You can see here for more info: https://angular.io/api/common/NgClass – Md. Abu Sayed Jan 21 '20 at 06:05

score 1 · Answer 8 · answered Aug 25 '17 at 00:48

I had this similar issue. I wanted to set a class after looking at multiple expressions. ngClass can evaluate a method inside the component code and tell you what to do.

So inside an *ngFor:

<div [ngClass]="{'shrink': shouldShrink(a.category1, a.category2), 'showAll': section == 'allwork' }">{{a.listing}}</div>

And inside the component:

section = 'allwork';

shouldShrink(cat1, cat2) {
    return this.section === cat1 || this.section === cat2 ? false : true;
}

Here I need to calculate if i should shrink a div based on if a 2 different categories have matched what the selected category is. And it works. So from there you can computer a true/false for the [ngClass] based on what your method returns given the inputs.

score 1 · Answer 9 · answered Apr 23 '23 at 11:35

1

A more simple way to add multiple dynamic classes, you can simply use:

<div [ngClass]="[class1, class2, condition ? class3 : '']"> Some content</div>

answered Apr 23 '23 at 11:35

Shadoweb

5,812
1
42
55

score 0 · Answer 10 · answered Oct 24 '22 at 01:02

0

For a more sophisticated situations, this can be helpful

<div [ngClass]="{'Class1':(condition1 || condition2), 'class2':( (condition1 || condition2) && condition3 )}"> Some content</div>

answered Oct 24 '22 at 01:02

Ali

1,633
7
35
58

Multiple conditions in ngClass - Angular 4

10 Answers10

Linked

Related