Search code examples
htmlangularng-class

ngClass with multiple conditions false condition not working

I'm trying to use [ngClass] with multiple conditions to change the caret of a open/close panel.

Currently the down arrow works flawlessly. When I click the arrow and the condition changes to false, it changes the icon to a empty box and is not recognizing the correct class name.

<i [ngClass]="{'fa fa-caret-up pull-right': isActive4 == true, 
'fa fa-caret-down pull-right': isActive4 == false}"
(click)="section4Click()"></i>

The section4Click() changes isActive4 to true/false depending on what it was before.

When I inspect element of the box that shows up after I click the down caret (which works), I get the following class name...

fa-caret-up

instead of...

fa fa-caret-up pull-right

Anyone know why this occurs? It seems like its doing half the job... I've also tried just doing isActive4 and !isActive4, and the same happens.

Solution

  • It's hard to tell from looking at your code. But you can try this:

    <i class="fa pull-right" [class.fa-caret-up]="isActive4" [class.fa-caret-down]="!isActive4" (click)="section4Click()"></i>

    I would also recommend printing the values to see what you get:

    <p>{{ isActive4 === true }}</p>