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

Ankit Singh · Accepted Answer · 2020-03-16T18:23:40.527

122

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

edited Mar 16 '20 at 18:23

answered Jul 05 '16 at 12:19

Ankit Singh

24,525
11
66
89

It works, but I am very confused, is ngClass useless then ? – Scipion Jul 05 '16 at 12:23
4

`[ngClass]="condition ? 'checked' : 'unchecked'"` should work as well. – Günter Zöchbauer Jul 05 '16 at 12:23
@Scipion NO. you just have to find the right situation to use it, see [this](http://stackoverflow.com/questions/30283771/ng-class-in-angular2/36199294#36199294) for all possible cases. – Ankit Singh Jul 05 '16 at 12:24
1

Thanks for the explanation sir. – Scipion Jul 05 '16 at 12:27

Angular 2 Doing an else with ngClass

1 Answers1

Angular 9 Update

Linked