What is an example of a material design angular2/4 menu with nested dropdown options like angular1?

Question

I really want to incorporate angular2 material, noticed the following menu example:

https://material.angularjs.org/1.1.4/demo/menuBar

This

Answer 1

Update:

This feature was added in 2.0.0-beta.10 découpage-panjandrum

Example

Previous version:

It is planned in future https://github.com/angular/material2/issues/1429

But now i suspect it is possible. Here is my Plunker Material2 Menu Example that demonstrates such menu

Template might look like this:

  
    {{item.text}}
  
  
    
  



  
    
      
        {{item.text}}
        {{item.extraText}}
        {{item.icon}}
      
      
        
      
      
    
    
      
        {{item.text}}
        {{item.extraText}}
      
      
    
  

You need only to declare items definitions:

menuItems = [
  {
    text: 'File',
    items: [
      {
        text: 'Share'
      },
      {
        text: 'New',
        icon: 'arrow_right',
        items: [
          {
            text: 'Document'
          },
          {
            text: 'Form'
          }
        ]
      },
      {
        text: 'Print',
        extraText: 'Ctrl+P'
      }
    ]
  },
  {
    text: 'Edit',
  }
];