Tengo la siguiente lista desplegable anidada. Los elementos secundarios están inicialmente ocultos y al hacer clic en el elemento principal se alterna una clase "abierta" para mostrar los elementos secundarios. Estoy tratando de mostrar condicionalmente la lista completa con un ngIf , que funciona correctamente. Sin embargo, cuando mi condición es verdadera, la alternancia de clase abierta ya no funciona. ¿Alguna razón por la que simplemente agregar la condición ngIf rompe esta funcionalidad?

 <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>