title: Dynamic nested Material menu from json object in Angular 5
body: <p>How to create dynamic nested menu from json object?</p>
  
  <p>I started using Angular Material Design today for the first time and I'm trying to create nested menus using material design. The <a href="https://material.angular.io/components/menu/overview" rel="noreferrer">documentation</a> is pretty straight forward for static stuff.</p>
  
  <p>But I need to create dynamic nested menu from json object and I can't find a simple solution to this anywhere. It just needs to be one level deep.</p>
  
  <p>json object(not set in stone):</p>
  
  <pre><code>my_menu = {
      'main1': ['sub1', 'sub2'],
      'main2': ['sub1', 'sub2'],
  }
  </code></pre>
  
  <p>which would generate something like this but dynamically: <a href="https://stackblitz.com/edit/angular-hc2fus?file=app%2Fapp.component.html" rel="noreferrer">expected result example at stackblitz</a></p>
  
  <p><a href="https://i.stack.imgur.com/R1NaM.png" rel="noreferrer"><img src="https://i.stack.imgur.com/R1NaM.png" alt="how it looks"></a></p>
  
  <p>I tried building it running <code>*ngFor</code> like this for main menu and then separate on each sub menu but it ended in errors.</p>
  
  <pre><code>&lt;button mat-button [matMenuTriggerFor]="main_menu"&gt;My menu&lt;/button&gt;
  
  &lt;mat-menu #main_menu="matMenu"&gt;
    &lt;button *ngFor="let main_item of objectKeys(my_menu)" mat-menu-item [matMenuTriggerFor]="main_item"&gt;{{ main_item }}&lt;/button&gt;
    &lt;button mat-menu-item [matMenuTriggerFor]="main2"&gt;main2&lt;/button&gt;
  &lt;/mat-menu&gt;
  
  &lt;mat-menu *ngFor="let sub_menu of objectKeys(my_menu)" #sub_menu="matMenu"&gt;
    &lt;button *ngFor="let sub_name of sub_menu" mat-menu-item&gt;{{ sub_name }}&lt;/button&gt;
  &lt;/mat-menu&gt;
  </code></pre>
  
  <p>I know it's wrong but that's where my understanding of angular ended.</p>
  
  <p>objectKeys just returns all the keys of the object using <code>Object.keys</code> which is loaded from the ts file.</p>
  
  <pre><code>objectKeys = Object.keys;
  </code></pre>
  
  <p>PS. I'm fairly new to Angular also</p>