html - Angular 2 Doing an else with ngClass

Question

I have the following template :

<p [ngClass]="{checked: condition, unchecked: !condition}">

While this is working, I find it a bit ugly as I have to repeat twice the condition. Is there a way to something like : [ngClass]={condition ? checked : unchecked} (which is not working)

Thanks

question from:https://stackoverflow.com/questions/38203030/angular-2-doing-an-else-with-ngclass

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