Angular6 Can't use ternary operator in ngClass with multiple entries-CodePudding

I'm trying to add multiple classes by ngClass, and I'm confused as to why I can't use ternary operator here.

<div [ngClass]="{'otherClass': otherFlag, classFlag ? 'class--true': 'class--false'}>

I get the following error:

Parser Error: Missing expected } at column 37 in [{'otherClass': otherFlag, classFlag ? 'class--true': 'class--false'}]

I'm aware I can do the following:

<div [ngClass]="{
'otherClass': otherFlag,
'class--true': classFlag,
'class--false': !classFlag
}">

Just trying to understand why I can't use ternary operator here (or maybe I'm doing it wrong). I would appreciate the help in understanding this.

CodePudding user response：

You can't use ternary operator this way because the value of ngClass is a JavaScript object and your class name is used as a key of the object. The ternary operator can only be used for values, not for keys.

You can do this in a JSON:

{
 "key": condition ? value : otherValue
}

But you can't do that:

{
 condition ? "key" : "otherKey": value
}

To do what you want to do you have to use [class] instead of [ngCLass]. Like that:

<div [class]="classFlag ? 'class--true' : 'class--false'">

CodePudding user response：

They just can't be combined in that way. Use one or the other. For multi condition use example 3, for tenerary use example 1 or 2.

<div [ngClass]="classFlag === false ? 'class--true' : 'class--false'">
  I will be class false
</div>

<div [ngClass]="classFlag === true ? 'class--true' : 'class--false'">
I will be class true
</div>

<div [ngClass]="{ otherClass: otherFlag === true }">I will be class true</div>

Example: https://stackblitz.com/edit/angular-ivy-hmnctu?file=src/app/app.component.html