Implementing nested menu in Angular Material 2

Question

I am facing some problems while implementing nested menu within a toolbar in Angular Material:

The main menu list is placed over the button that tiggers it and not under it, as shown in the official documentation
There is nothing that indicates that an item of the menu contains a submenu list (some kind of arrow for example)
When I implement a submenu list, the main list of the menu disappears once a submenu is clicked, (You can take the example of my code below tested in a small resolution: when the 'Manage' menu is clicked it shows the Products and the Staff list, but the main list of the menu that contains the 'Manage' item disappears)

This is my implementation:

<md-toolbar color="primary">
  <button md-button routerLink="/">
    <md-icon> home </md-icon>
    <span> Home </span>
  </button>

  <div fxLayout="row" fxShow="false" fxShow.gt-sm>
    <button md-button [mdMenuTriggerFor]="administration">
      <span> Manage </span>
    </button>
    <button md-button routerLink="/help">
      <md-icon> help_outline </md-icon>
      <span> Help </span>
    </button>
  </div>
  
  <button md-button [mdMenuTriggerFor]="menu" fxHide="false" fxHide.gt-sm>
    <md-icon> more_vert </md-icon>
  </button>
</md-toolbar>

<md-menu #administration="mdMenu">
  <button md-menu-item routerLink="/products">
    <span> Products </span>
  </button>
  <button md-menu-item routerLink="/staff">
    <span> Staff </span>
  </button>
</md-menu>

<md-menu xPosition="before" #menu="mdMenu">
  <button md-menu-item [mdMenuTriggerFor]="administration">
    <span> Manage </span>
  </button>
  <button md-menu-item routerLink="/help">
    <span> Help </span>
  </button>
</md-menu>

The behavior that I am looking for is native in the MenuBar component of AngularJS Material, and since Angular Material is still in its beta version, I am wondering if there is some problem in my code or do I just have to wait the improvement of this component in a next version of the framework.

Playdome.io · Accepted Answer · 2018-06-20 03:16:36Z

1

Well I am not sure what do you use, but i used https://teradata.github.io/covalent/#/components/expansion-panel and i came up with the following solution:

<md-nav-list td-sidenav-content>
    <td-expansion-panel md-list-item>
            <ng-template td-expansion-panel-header>
                <a md-list-item>
                    <md-icon md-list-avatar>settings</md-icon>
                    <h3 md-line> Nested menu </h3>
                </a>
                <md-divider></md-divider>
            </ng-template>

        <md-list class="bgc-blue-grey-50">
            <h3 md-subheader>Metadata</h3>
            <a md-list-item style="padding-left:20px;">
                <md-icon md-list-avatar>settings</md-icon>
                <h3 md-line> Nested Item </h3>
            </a>
        </md-list>

    </td-expansion-panel>

    <!-- Settings -->
        <a md-list-item>
            <md-icon md-list-avatar>settings</md-icon>
            <h3 md-line> Settings </h3>
        </a>
</md-nav-list>

EDIT: The answer was posted way before angular material was in a usable state. The latest angular material library comes with a tree component that has a pretty nice structure. I recommend now using that.

edited Jun 20, 2018 at 3:16

answered Jun 23, 2017 at 19:47

Playdome.io

3,2652 gold badges22 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Playdome.io Over a year ago

For the down voters. The answer was posted way before angular material was in a usable state. The latest angular material library comes with a tree component that has a pretty nice structure

Collectives™ on Stack Overflow

Implementing nested menu in Angular Material 2

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related