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
You can do like this [ngClass]="{'class1':condition1, 'class2':condition2}" .
yes , you can do it. Did you try it? What happened? You can use both class and ngClass as the first one gives you the opportunity to apply a class that you want to implement in all cases under any circumstances and the later to apply classes conditionally.
javascript - ng-if and ng-class-even/odd doesn't work well together and won't get expected outout - Stack Overflow. Stack Overflow for Teams – Start collaborating and sharing organizational knowledge.
Using multiple classes is the real reason to use the NgClass directive. You can think of NgClass as being able to specify multiple [class.
Indeed
<p class="{{condition ? 'checked' : 'unchecked'}}">
or
<p [ngClass]="condition ? 'checked' : 'unchecked'">
or
<p [ngClass]="[condition ? 'checked' : 'unchecked']">
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With