*_Expected behavior_*The menu dropdown works

Actual behavior

It doesn't work. Appears in the source code as an invisible element (display:none), and stays invisible when I click on the dropdown trigger.When I use the raw example code of the website, it works as expected, so I think the issue with that I'd print them recursively using ng-template.

Resources (screenshots, code snippets etc.)

  <mdb-navbar SideClass="navbar navbar-expand-md fixed-top navbar-dark bg-ocean shadow-none">

    <mdb-navbar-brand><a class="navbar-brand" href="/"><img src="/templates/default/logo.svg?ver=3" height="40"></a></mdb-navbar-brand>
    <links>
      <ul class="navbar-nav mr-auto">
        <li class="nav-item" *ngFor="let item of menu | toArray" [ngClass]="{dropdown: item.children}" [attr.dropdown]="item.children ? 'dropdown' : false">
          <ng-container *ngTemplateOutlet="menu_level_1; context:{ $implicit: item}"></ng-container>
        </li>
      </ul>

      <ng-template #menu_level_1 let-item>
        <a routerLink="{{item.path}}" class="nav-link waves-light" mdbWavesEffect *ngIf="!item.children">{{item.title}}</a>

        <a mdbWavesEffect type="button" class="nav-link dropdown-toggle waves-light" mdbWavesEffect *ngIf="item.children">
          {{item.title}}<span class="caret"></span>
        </a>
        <div class="dropdown-menu dropdown dropdown-primary" role="menu">
          <a class="dropdown-item waves-light" mdbWavesEffect href="#">Action</a>
          <a class="dropdown-item waves-light" mdbWavesEffect href="#">Another action</a>
          <a class="dropdown-item waves-light" mdbWavesEffect href="#">Something else here</a>
          <div class="divider dropdown-divider"></div>
          <a class="dropdown-item waves-light" mdbWavesEffect href="#">Separated link</a>
        </div>
      </ng-template>
    </links>
  </mdb-navbar>

The object from the js file:


    this.menu = {
  'home' : {title:'Home',path:'/'},
  'places' : {
    title:'Places',
    children:{
      'locations': { title:'MTP Locations',path:'/checklists/locations' },
      'restaurants': {
        title: 'Restaurants',
        children:{
          'restaurants':{ title: 'Restaurants (**+)',path:'/checklists/restaurants' },
          'restaurantstop100':{ title: 'Restaurants (Top 100)',path:'/checklists/restaurants' }
        }
      },
    }
  },
  'rankings' : {
    title: 'Rankings',
    children:{
      'sliceanddice': { title: 'Slice and Dice', path: '/rankings'},
      'hallsoffame': { title: 'Halls of Fame', path: '/milestones/locations'},
    }
  },
  'contact' : { title: 'Contact',path: '/contact' }
}