Watch video: dropdown does not appear after toggled by Angul

Expected behavior

Angular toggles the visibility of a nav link by the *ngIf structural directive. When a user authenticates, we show their name and other changes in the navbar. When the "isAuthenticated" property is true, the dropdown should show.

Actual behavior

Watch the video: https://www.screencast.com/t/VDipCIMf2 The user authenticates, which adds the dropdown element to the navbar. But clicking on the dropdown nav-item does not open the dropdown. If you resize the window a little (also in the video), the dropdown appears. If the user is authenticated from the start, there is no problem. This problem only occurs when Angular adds the dropdown to the DOM by the *ngIf directive.

In the video, you can see the isAuthenticated value printed to the navbar as ((ia:true)). It changes from false to true. I even tried using Angular's detectChanges() method, but this also does not solve the problem.

Resources (screenshots, code snippets etc.)

The dropdown nodes exist in the DOM, because you can inspect it in Chrome dev tools. The problem is just the rendering of the dropdown. I tried removing the mdbWavesEffect directive and "waves-light" class from these elements, but those did not solve the problem.

<header>

  <!-- Navbar brand -->
  <mdb-navbar-brand><a class="navbar-brand" [routerLink]="['/']">
    (site name)
  </a>
</mdb-navbar-brand>



  <!-- Collapsible content -->
  <links>

    <!-- Links -->
    <ul class="navbar-nav mr-auto">
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link waves-light" [routerLink]="['/podcast/episodes/how-to-keep-up-to-date-when-cultures-change']" mdbWavesEffect>
          <span *transloco="let t">
            <strong>{{ t('SHOWS.EPISODES') }}</strong>
          </span>
          <span class="sr-only">(current)</span>
        </a>
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link waves-light" [routerLink]="['/guests/1']" mdbWavesEffect>
          <span *transloco="let t">
            <strong>{{ t('SHOWS.GUESTS') }}</strong>
          </span>
        </a>
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link waves-light" [routerLink]="['/tools/1']" mdbWavesEffect>
          <span *transloco="let t">
            <strong>{{ t('TOOLS.TOOLS') }}</strong>
          </span>
        </a>
      </li>
    </ul>
    <!-- Links -->
    <ul class="navbar-nav ml-auto nav-flex-icons">
      <li class="nav-item" *ngIf="!isAuthenticated">
        <a class="nav-link" [routerLink]="['/register']">
          <mdb-icon fas icon="user-plus"></mdb-icon>
          <span *transloco="let t">
            <strong>{{ t('COMMON.REGISTER') }}</strong>
          </span>
        </a>
      </li>
      <li class="nav-item" *ngIf="!isAuthenticated">
        <a class="nav-link" [routerLink]="['/login']">
          <mdb-icon fas icon="sign-in-alt"></mdb-icon>
          <span *transloco="let t">
            <strong>{{ t('COMMON.LOG_IN') }}</strong>
          </span>
        </a>
      </li>
      <li class="nav-item avatar dropdown mt-1" dropdown *ngIf="isAuthenticated">
        <a dropdownToggle mdbWavesEffect type="button" class="nav-link dropdown-toggle waves-light" mdbWavesEffect>
          <span>{{user.fname+' '+user.lname}}</span>
          <img src="{{user.picture || 'https://randomuser.me/api/portraits/women/40.jpg'}}" alt="" class="img-fluid rounded-circle z-depth-0">
        </a>
        <div *dropdownMenu class="dropdown-menu dropdown-menu-right dropdown dropdown-primary" role="menu">
          <a class="dropdown-item waves-light" mdbWavesEffect href="#">My account</a>
          <a class="dropdown-item waves-light" mdbWavesEffect (click)="logout()">Log out</a>
        </div>
      </li>
    </ul>
  </links>
  <!-- Collapsible content -->

</mdb-navbar>
<!--/.Navbar-->

Company | Privacy | Help | About