Angular 2 error "Unhandled Promise rejection: Template parse errors:"

Question

When I use the ngClass directive like this:

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

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 1

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