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

The following structure should work for you:

My menu


  
    {{ mainItem }}
    
       {{ subItem }}
    
  

Since I placed sub_menu inside the embedded template (*ngFor) we can use the same name for template reference variable(#sub_menu).

Stackblitz Example