Динамическое вложенное меню Sidenav с Angular 6, Bootstrap 4, HTML, CSS

Question

Невозможно показать / скрыть пункты меню в динамически сгенерированном (из json) вложенном меню sidenav.My techstack - Angular 6, BS 4, HTML, SCSS

Подобный рабочий пример с использованием материала доступен здесь

Моя угловая модель и HTML-код: (невозможно исправить cssскрыть / показать пункты меню, созданные таким образом)

Model Class

export interface NavItems {
  displayName: string;
  disabled?: boolean;
  iconName: string;
  route?: string;
  children?: NavItems[];
}

<!-- Component.html -->

<span *ngFor="let item of navItems">
  <span *ngIf="item.children && item.children.length > 0">
     <div style="background-color:darkcyan">{{item.displayName}}</div>
        <app-menu-item #menu [items]="item.children"></app-menu-item>
  </span>
  <span *ngIf="!item.children || item.children.length === 0">
       <div style="background-color:crimson">{{item.displayName}}</div>
  </span>
</span>

<!-- app-menu-item  (for iteration) -->

<span *ngFor="let item of items">
  <span *ngIf="item.children && item.children.length > 0">
    <div style="background-color: darkorchid">{{item.displayName}}</div>
    <app-menu-item #menu [items]="item.children"></app-menu-item>
  </span>
  <span *ngIf="!item.children || item.children.length === 0">
    <div style="background-color:chartreuse">{{item.displayName}}</div>
  </span>
</span>