Search code examples
angular

Multiple conditions in ngClass - Angular 4

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

Solution

  • 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">