'Angular ngIf condition breaking javascript logic
I have the following nested dropdown list. The child items are initially hidden and clicking on the parent toggles an "open" class to display the children.
I am trying to conditionally display the entire list with an ngIf
, which works correctly. However, when my condition is true the open class toggle no longer works. Any reason why simply adding the ngIf
condition breaks this functionality?
<li class="nav-item dropdown" *ngIf="isMHQEnabled"> //toggles correctly without the if condition
<a class="dropdown-toggle">
<i class="fal fa-exchange"></i>
<i class="fas fa-exchange"></i>
<span class="title">Broker Transfers</span>
<span class="arrow">
<i class="fas fa-chevron-down"></i>
</span>
</a>
<ul class="dropdown-menu sub-down">
<li class="nav-item dropdown">
<a class="dropdown-toggle" (click)="initiateBrokerTransfer()">
<i class="fal fa-message-dots"></i>
<i class="fas fa-message-dots"></i>
<span class="title">Transfer Request</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="dropdown-toggle" (click)="navigate('brokertransfer')">
<i class="fal fa-list-check"></i>
<i class="fas fa-list-check"></i>
<span class="title">Transfer Status</span>
</a>
</li>
</ul>
</li>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|