Home > OS >  ngClass combining multple conditions?
ngClass combining multple conditions?

Time:10-28

How do I combine multiple conditions in Angular? im using angular 12 at the moment.

example:

[ngClass]="condition1 ? 'className1': 'classname2'" this works if condition 1 is true or false.

now how to add multiple?

[ngClass]='condition1 ? 'className1' : 'classname2' && conditionX ? 'classNameY' : 'classNameZ'"

only the first condition seems to be checked, anything else after the && doesn't show up

CodePudding user response:

For multiple conditions classes to apply refer Angular Docs. It has good explanation. Link

CodePudding user response:

Using an object you can handle multiple conditions

<div [ngClass]="{'firstClass': true, 'secondClass': true, 'thirdClass': false}">
     // your code...
</div>

CodePudding user response:

For multiple conditions you can do like this:

[ngClass]="[ condition1 ? 'className1' : 'className2', conditionX ? 'classNameY' : 'classNameZ']"

separate each condition with ','

  • Related