title: Angular 2 Dynamic menu from json
body: <p>I am trying to create bootstrap navbar menus dynamically using Angular 2.
  The source data for the menu comes from json which looks like below:</p>
  
  <pre><code>[
    {
      name: 'Dashboard',
      url: '/dashboard',
      writeble: true,
      icon: 'icon-speedometer'
    },
    {
      name: 'Menu1',
      url: '/menu1',
      writeble: true,
      icon: 'icon-puzzle',
      children: [
        {
          name: 'Item1.1',
          url: '/item/item1.1',
          writeble: true,
          icon: 'icon-puzzle'
        },
        {
          name: 'Item1.2',
          url: '/item/item1.2',
          writeble: true,
          icon: 'icon-puzzle'
        }
      ]
    }
  ]
  </code></pre>
  
  <p>Currently, my menu is hardcoded in this way into the navbar.component.html, I have to create a function into component.ts where read the json file and then how to store the data and send it to html?</p>
  
  <pre><code>&lt;div id="context-menu"class="custom-menu"&gt;
     &lt;li ngbDropdown class="nav-item dropdown pointer" 
       &lt;a class="nav-link dropdown-toggle" ngbDropdownToggle 
         href="javascript:void(0);" id="menu1"&gt;                           
         &lt;span&gt;Menu1&lt;/span&gt;
      &lt;/a&gt;
      &lt;ul class="dropdown-menu" ngbDropdownMenu&gt;
          &lt;li&gt;
          &lt;a class="dropdown-item" [routerLink]="['Item1.1']" 
             [routerLinkActiveOptions]="{ exact: true }"                             
             (click)="collapseNavbar()"&gt;
             &lt;span&gt;Item1.1&lt;/span&gt;
          &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a class="dropdown-item" [routerLink]="['Item1.2']" 
              routerLinkActiveOptions]="{ exact: true }"
              (click)="collapseNavbar()"&gt;
              &lt;span&gt;Item1.2&lt;/span&gt;
              &lt;/a&gt;
          &lt;/li&gt;                    
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Can you suggest how I can replace the hardcoded menu items with the dynamic one?
  Thanks.</p>