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

Question

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.

What you have is simply an invalid JavaScript consturct. As your other example shows you need to have an object, and while you can make an expression with a ternary operator that results in an object, your other example is simpler and more readable. — tromgy
– tromgy, Commented Feb 11, 2022 at 12:33

Bryan BERGER · Accepted Answer · 2022-02-11 13:06:23Z

3

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

answered Feb 11, 2022 at 13:06

Bryan BERGER

2412 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Joosep Parts · Accepted Answer · 2022-02-11 12:50:20Z

0

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

answered Feb 11, 2022 at 12:50

Joosep Parts

6,3452 gold badges13 silver badges38 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related