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>