Angular 2 Doing an else with ngClass

Question

I have the following template :

While this is working, I find it a bit ugl

Answer 1

Indeed

<p class="{{condition ? 'checked' : 'unchecked'}}">

or

<p [ngClass]="condition ? 'checked' : 'unchecked'">

or

<p [ngClass]="[condition ? 'checked' : 'unchecked']">

---

Angular 9 Update

But you should know that there's a difference in how different types of class bindings behave, especially when there are multiple types of class bindings on the same element.

And the new compiler, Ivy, brings more clarity and predictability to it. Read More about it here