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.

Answer 1

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