Dynamic Nested Menu from JSON upto 4 levels

[Ameya1991]

am having issues working with the nested-menu and nested classes while trying to generate dynamic menu using ngFor & ngIf.

Similar sidenav with Material example is available here

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>