Angular error: "Template parse errors: Parser Error: Missing expected : "

Question

I have this ngClass directive:

[ngClass]="{checkFav(fullArtist) ? 'action-btn-added' : 'action-btn-not-added'}"

Where checkFav is a function. I get this error:

Error: Template parse errors: Parser Error: Missing expected : at column 10 in [{checkFav(fullArtist) ? 'action-btn-added' : 'action-btn-not-added'}]

What am I doing wrong? I read a lot of answers, all of them suggesting things I already done like using quotes.

Hien Nguyen · Accepted Answer · 2020-05-02 11:42:50Z

3

You need change { to ( as

<div [ngClass]="(checkFav(fullArtist) ? 'action-btn-added' : 'action-btn-not-added')">Test</div>

But you should move logic to select class code to checkFav(fullArtist)

and only use <div [ngClass]="checkFav(fullArtist)">Test</div>

answered May 2, 2020 at 11:42

Hien Nguyen

19k7 gold badges57 silver badges70 bronze badges

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

Comments

Barremian · Accepted Answer · 2020-05-02 11:44:35Z

1

You need remove the curly braces. The aren't required for ngClass in this context. Try the following

[ngClass]="(checkFav(fullArtist) ? 'action-btn-added' : 'action-btn-not-added')"

answered May 2, 2020 at 11:44

Barremian

31.2k4 gold badges37 silver badges67 bronze badges