Search code examples
htmlangularng-class

Angular 2 Doing an else with ngClass

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

Solution

  • 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