CODEWITHSUNDEEP
angularangular6angular-ng-class
dabrowawojciech64
dabrowawojciech64

Reputation: 13

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

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.

Edit: Thank you for both answers. I mostly understood it thanks to Bryan's answer, but both were helpful.

Upvotes: 1

Views: 2906

Answers (2)

Bryan BERGER
Bryan BERGER

Reputation: 231

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

Upvotes: 3

Joosep Parts
Joosep Parts

Reputation: 6225

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%2Fapp%2Fapp.component.html

Upvotes: 0

Related Questions