Eran Shabi Eran Shabi - 1 month ago 13
Javascript Question

Angular 2 ngClass "Unhandled Promise rejection: Template parse errors: Parser Error"

I use the ngClass directive like this:

[ngClass]="{has-error: !myInput.valid}"


But I get the following error:

Unhandled Promise rejection: Template parse errors:
Parser Error: Missing expected : at column 5 in [{has-error: !myInput.valid}] in ...html...


How can I solve this error?

Answer

The problem is with the -(dash) character in the has-error class name.

If your class name got a dash in its name, you must use quotes like this:

[ngClass]="{'has-error': !myInput.valid}"