Dynamic nested Material menu from json object in Angular 5

Question

How to create dynamic nested menu from json object?

I started using Angular Material Design today for the first time and I\'m trying to create nested menus using materia

Answer 1

Here is a StackBlitz example of an arbitrarily deep nesting based on JSON (authored by @Splaktar)

The key to arbitrary nesting is the self-referencing menu-item.component:

import {Component, Input, OnInit, ViewChild} from '@angular/core';
import {Router} from '@angular/router';
import {NavItem} from '../nav-item';

@Component({
  selector: 'app-menu-item',
  templateUrl: './menu-item.component.html',
  styleUrls: ['./menu-item.component.scss']
})
export class MenuItemComponent implements OnInit {
  @Input() items: NavItem[];
  @ViewChild('childMenu') public childMenu;

  constructor(public router: Router) {
  }

  ngOnInit() {
  }
}

  
    
    
      
        {{child.iconName}}
        {{child.displayName}}
      
      
    
    
    
      
        {{child.iconName}}
        {{child.displayName}}