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

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

```

{{item.displayName}}

{{item.displayName}}

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