Multiple conditions in ngClass - Angular 4
AngularAngular Problem Overview
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
Angular Solutions
Solution 1 - Angular
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">
Solution 2 - Angular
you need object notation
<section [ngClass]="{'class1':condition1, 'class2': condition2, 'class3':condition3}" >
ref: NgClass
Solution 3 - Angular
<section [ngClass]="{'class1': expression1, 'class2': expression2,
'class3': expression3}">
Don't forget to add single quotes around class names.
Solution 4 - Angular
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>
Solution 5 - Angular
<a [ngClass]="{'class1':array.status === 'active','class2':array.status === 'idle','class3':array.status === 'inactive',}">
Solution 6 - Angular
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>
Solution 7 - Angular
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.
Solution 8 - Angular
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">