docs(menu): add example of nested menus using dynamic data #7434

Splaktar · 2017-09-30T00:30:14Z

Bug, feature request, or proposal:

Feature Request - Menu Docs

What is the expected behavior?

The docs would include an example of building a menu from a data structure similar to the radio button docs.

What is the current behavior?

The menu docs only include a nested menu example using static HTML.

What are the steps to reproduce?

Working on a Stackblitz demo atm...

What is the use-case or motivation for changing an existing behavior?

This is a common use case for building application menus, especially for business applications. The data may come from a config file, a REST API, or some other source but it is very often not static and does not align with a static HTML example.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 4.4.3
TypeScript 2.3.4
Chrome 61
OS X El Capitan

Is there anything else we should know?

Thank you for your hard work on this library!

Splaktar · 2017-10-02T00:06:01Z

#6765 was likely to block this use case, but the fix has been merged into master.

Splaktar · 2017-10-02T00:07:47Z

There is an example of creating md-menu's dynamically here but it doesn't demonstrate nesting.

Splaktar · 2017-10-02T23:45:03Z

I've finally got something working on the latest snapshots. It's not possible in beta.11 due to the bugs related to ngIf/ngFor and menus. I'm working on distilling it down to a simple docs-ready example atm.

cpboyd · 2017-10-05T00:36:31Z

@Splaktar I'm interested to see what you find...

I just filed #7542 because it's not currently possible to use a recursive ng-template for creating a nested menu.

Mayocampo · 2017-10-07T01:52:33Z

hey everyone... im currently trying to achieve the same thing... it doesnt seem to be possible... any progress? i'm kinda new to Angular and i'm having a hard time tryin to figure this out. Any help would be more than welcome

Splaktar · 2017-10-07T07:43:47Z

I will publish what I got working next week. It is quite a different approach to what @cpboyd details in #7542.

Splaktar · 2017-10-08T02:11:30Z

Here's a Stackblitz of a working dynamic, nested menu: https://stackblitz.com/edit/dynamic-nested-menus?file=app%2Fapp.component.ts.

Note that the routing isn't actually hooked up.

Mayocampo · 2017-10-09T02:23:42Z

@Splaktar just awesome man.... great work. Question: If a need to bind the actual route, it must be hard coded on rounting.ts right? ... you saved my life :)

Splaktar · 2017-10-09T07:12:03Z

@Mayocampo Glad that it could help, thanks for the feedback :)

Yeah, I didn't hook up the routing to be generated dynamically. That's another topic that I haven't dug into just yet :) So yes, for now I just make sure that the app-routing.module.ts includes the routes that are specified in my config.

Here's another Stackblitz with routing hooked up plus a top level menu button bar: https://stackblitz.com/edit/dynamic-nested-topnav-menu?file=app%2Fapp.component.html

I'll be presenting on this at AngularMix on Thursday. Then I'll share my slides and some more examples (including a dynamic SideNav menu).

Hopefully I'll have time to put together the docs as well, but that will have to wait until later in November most likely.

cpboyd · 2017-10-09T11:47:21Z

@Splaktar I could swear I tried a similar approach using a custom components, but for some reason mine didn't propagate the "hover/expand" properly.

In any case, thanks for a working example!

Mayocampo · 2017-10-10T05:19:33Z

@Splaktar hey man... i've found an issue trying to implement this solution... i don't know if i'm doing something wrong. I'll try to explain:

I took your code and extend interface with some other properties.
I already have a model wich i fill with data from an API
I map that model into the structure of the interface you made

So, when i have a pretty simple one-level-menu it all works ok... but, here's the thing:

i made a service to make all the mapping (cause its kinda complex due to structure of my API data)
use that service to fill navItems (this.navItems = this._myService.MapElements(myListOfAPIData))
No compilation errors
Page load ok...
But when i try to load the menu (on some logon event) everything blows up and got this error:
"ERROR TypeError: Cannot read property 'changes' of undefined at mdMenu.webpackJsonp.../../../material/esm5/menu.es5.js.MdMenu.hover "

Have no idea whats happening there...

Heres my final json structure:

[
{
"idNav":0,
"displayName":"Inicio",
"iconName":"home",
"disabled":false,
"route":"home"
},
{
"idNav":1,
"disabled":true,
"displayName":"Gestión de Elementos",
"iconName":"list",
"children":[
{
"idNav":2,
"disabled":true,
"displayName":"Gestión de Menús",
"iconName":"view_headline",
"route":"menuManagement",
"parentId":1
},
{
"idNav":3,
"disabled":true,
"displayName":"Gestión de Roles",
"iconName":"assignment",
"route":"roleManagement",
"parentId":1
},
{
"idNav":4,
"disabled":true,
"displayName":"Gestión de Usuarios",
"iconName":"supervisor_account",
"route":"userManagement",
"parentId":1
},
{
"idNav":5,
"disabled":true,
"displayName":"Menú Hijo/Padre",
"children":[
{
"idNav":7,
"disabled":true,
"displayName":"Menú de 2do Nivel Hijo/Padre",
"iconName":"supervisor_account",
"children":[
{
"idNav":8,
"disabled":true,
"displayName":"Menú hijo de 3er Nivel",
"iconName":"supervisor_account",
"route":"userManagement",
"parentId":7
}
],
"parentId":5
}
],
"parentId":1
}
]
},
{
"idNav":6,
"disabled":true,
"displayName":"Menú Standalone",
"iconName":"warning"
}
]

Hope you can bring some light on this... don't know if this has something to do with a bad behaviour of @ViewChild ... Any help would be gladly received.

Thank u so much (and my apologizes if this is not the way to comunicate this issues)

Splaktar · 2017-10-10T16:00:12Z

@Mayocampo I am at AngularMix this week and I'm prepping for my talk on Thursday, so I don't have a ton of time to review your specific implementation issue. However, if you have an example in Stackblitz or Plunker, I can take a quick look and try to debug it. Another option would be posting to StackOverflow (and linking that question here).

Btw, I have run into this error and I forget the exact solution. I think it was related to missing fields in the config or needing a check in the template for something like *ngIf="child && child.items.length". It's hard for me to answer your specific case though w/o running the code.

ghost · 2017-10-13T13:34:16Z

I experienced the same error "ERROR TypeError: Cannot read property 'changes' of undefined at mdMenu.webpackJsonp.../../../material/esm5/menu.es5.js.MdMenu.hover ", related to "hover/expand", you can fix it by upgrading to the latest version of Angular Material. After upgrading my application the error went away and the "hover/expand" behavior now works as expected and demonstrated in the above stackblitz. Yes, it took me a few minutes to change all occurrences of the "md-" prefix to "mat-" prefix throughout my application and confirm no breaking changes exist.

Splaktar · 2017-10-13T14:53:00Z

Ah yes thank you @ebduhon! Beta.12 of the CDK and Angular Material are required as well as Angular 4.4.4.

Smitha-Patil · 2017-11-21T11:15:52Z

Dear Materials team, Kindly add this example as this is one of the most wanted use case.
@Splaktar: Thank you for the example code.

Swoox · 2017-11-28T12:08:52Z

@Splaktar cheers this works on Angular 5 to. Would be nice if this feature would be implemented.

d-damien · 2018-02-20T11:03:20Z

I have that weird problem where submenus appear only on click (not hover) and don't autoclose. It is all reset if I close root menu. See image below.

What's frustrating is it works with documentation code ; it seems to be the dynamic generation / loop that creates problem.

Here's my code. I have tried replacing <a> links with <buttons> and removing all routerLink or specific functions. What did I miss @Splaktar ?

Angular 5.2.1, cdk 5.1, Chromium 64.0.3282.119.

<nav fxShow fxHide.gt-md class="spin-menu">
  <mat-menu #appMenu>
    <ng-container *ngFor="let panel of panels">
      <ng-container [ngSwitch]="panel.type">
        <ng-container *ngSwitchCase="'submenu'">
          <button
            [matMenuTriggerFor]="submenu"
            [ngClass]="{ 'active': hasSubpanelSelected(panel) }"
            mat-menu-item>
              {{ panel.title }}
              <i *ngIf="panel.new" class="new">NEW</i>
              <i *ngIf="panel.beta" class="beta">BETA</i>
          </button>
          <mat-menu #submenu>
            <a *ngFor="let subpanel of panel.subpanels"
              routerLink="{{ base }}/base/dashboard/{{ subpanel.value }}"
              (click)="reloadPage($event)"
              [ngClass]="{ 'active': selectedPanel == subpanel.value }"
              mat-menu-item>
                {{ subpanel.title }}
                <i *ngIf="subpanel.new" class="new">NEW</i>
                <i *ngIf="subpanel.beta" class="beta">BETA</i>
            </a>
          </mat-menu>
        </ng-container>

        <a *ngSwitchDefault
          routerLink="{{ base }}base/dashboard/{{ panel.value }}"
          (click)="reloadPage($event)"
          [ngClass]="{ 'active': selectedPanel == panel.value }"
          mat-menu-item>
            {{ panel.title }}
            <i *ngIf="panel.new" class="new">NEW</i>
            <i *ngIf="panel.beta" class="beta">BETA</i>
        </a>
      </ng-container>
    </ng-container>
  </mat-menu>

  <button [matMenuTriggerFor]="appMenu" mat-button>
    <mat-icon>menu</mat-icon>
  </button>
</nav>

d-damien · 2018-02-21T12:12:49Z

Found it ! <mat-menu> does not like ngSwitch, you have to replace them with ngIf.

irowbin · 2018-02-22T07:29:40Z

Hi @d-damien! My submenu disappeared when hovering. I just copied your code from above like this.

<mat-menu #appMenu>
    <ng-container *ngFor="let panel of panels">

        <ng-container *ngIf="panel.sub.length>0">
            <button [matMenuTriggerFor]="submenu" mat-menu-item>
                {{ panel.text }}
            </button>
            <mat-menu #submenu>
                <a *ngFor="let subpanel of panel.sub" mat-menu-item>
                    {{ subpanel.text }}
                </a>
            </mat-menu>
        </ng-container>

        <a *ngIf="!(panel.sub.length>0)" mat-menu-item>
            {{ panel.text }}
        </a>

    </ng-container>
</mat-menu>

<button [matMenuTriggerFor]="appMenu" mat-button>
    <mat-icon>menu</mat-icon>
</button>

  panels: any[] = [
        {
            text: 'parent',
            sub: [{
                text: 'sub item'
            }]
        }
    ];

Take a look:

d-damien · 2018-02-22T09:31:11Z

Hello @irowbin. This is all really weird. Non-reproducible bugs are the strangest. My diff indicates ngSwitch -> ngIf to be the only difference.

What I did to find a solution is to copy paste a working example (the one in the doc at "nested menu" section), then slightly modify it step by step until it works for me. Hope you can do the same. Here's my code as of now FYI :

<nav fxShow fxHide.gt-md class="spin-menu">
  <mat-menu #appMenu>
    <ng-container *ngFor="let panel of panels">
      <ng-container *ngIf="panel.type == 'submenu'">
        <button
          [matMenuTriggerFor]="submenu"
          [ngClass]="{ 'active': hasSubpanelSelected(panel) }"
          mat-menu-item>
            {{ panel.title }}
            <i *ngIf="panel.new" class="new">NEW</i>
            <i *ngIf="panel.beta" class="beta">BETA</i>
        </button>
        <mat-menu #submenu>
          <a *ngFor="let subpanel of panel.subpanels"
            routerLink="{{ base }}/base/dashboard/{{ subpanel.value }}"
            (click)="reloadPage($event)"
            [ngClass]="{ 'active': selectedPanel == subpanel.value }"
            mat-menu-item>
              {{ subpanel.title }}
              <i *ngIf="subpanel.new" class="new">NEW</i>
              <i *ngIf="subpanel.beta" class="beta">BETA</i>
          </a>
        </mat-menu>
      </ng-container>

      <a *ngIf="panel.type != 'submenu'"
        routerLink="{{ base }}base/dashboard/{{ panel.value }}"
        (click)="reloadPage($event)"
        [ngClass]="{ 'active': selectedPanel == panel.value }"
        mat-menu-item>
          {{ panel.title }}
          <i *ngIf="panel.new" class="new">NEW</i>
          <i *ngIf="panel.beta" class="beta">BETA</i>
      </a>
    </ng-container>
  </mat-menu>

  <button [matMenuTriggerFor]="appMenu" mat-button>
    <mat-icon>menu</mat-icon>
    Menu
  </button>
</nav>

d-damien · 2018-02-22T09:40:15Z

Data looks like this :

"panels": [
    {
      "value": "1",
      "title": "1"
    },
    {
      "title": "2",
      "type": "submenu",
      "subpanels": [
        {
          "value": "2.1",
          "title": "2.1"
        },
        {
          "value": "2.2",
          "title": "2.2"
        }
      ]
    },

qpi · 2018-02-23T10:14:48Z

I have the same hovering issue:

Here it is in live:

https://qpi.github.io/sightseeing/route

The source is here:

https://github.com/qpi/sightseeing/blob/master/src/app/route/route.component.html

irowbin · 2018-02-24T02:31:05Z

@qpi #10081

CharlyRipp · 2018-04-03T04:11:04Z

Simplified working example.

Somewhat annoying to use ng-container and having to create the button twice - once with and once without the [matMenuTriggerFor].

let links = [
    { label: "Link 1", route: "/link1"},
    { label: "Link 2", route: "/link2", children: [
        { label: "Child Link 1", route: "/child1"},
        { label: "Child Link 2", route: "/child2"}
    ]}
]

<mat-menu #appMenu="matMenu">
    <ng-container *ngFor="let link of links">
        <!-- subMenu is created regardless as it causes an error even if *ngIf is found false -->
        <mat-menu #subMenu="matMenu">
          <button mat-menu-item
                  *ngFor="let childLink of link.children"
                  [routerLink]="childLink.route">{{childLink.label}}</button>
        </mat-menu>

        <!-- Button with submenu -->
        <button *ngIf="link.children" mat-menu-item
                [matMenuTriggerFor]="subMenu"
                [routerLink]="link.route">{{link.label}}</button>

        <!-- Button without submenu -->
        <button  *ngIf="!link.children" mat-menu-item
                [routerLink]="link.route">{link.label}}</button>
    </ng-container>
</mat-menu>

<button id="nav-toggle" mat-icon-button [matMenuTriggerFor]="appMenu">
    Menu
</button>

Just throwing this here for others -- a proper solution would be much nicer :)

sashagrunge · 2018-04-10T10:44:52Z

@Splaktar Thanks for the example. Are there any plan to support the hover event on latest version, so we don't have to stick to angular 4.4.4 for the solution?

Splaktar · 2018-04-10T22:56:46Z

@sashagrunge which version are you using? The hover issue was fixed in Angular Material 5.2.4.

irowbin · 2018-04-11T02:23:46Z

@Splaktar YEP, there is no issues. @sashagrunge You should update to latest version.

sashagrunge · 2018-04-11T09:11:28Z

@Splaktar @irowbin I am using the latest version 5.2.4, but I realised that hover doesn't work only if I add one more component to wrap the menu-item. Thank!

amoguilner · 2018-06-20T21:04:36Z

I have expanded this menu to use dynamic click function as well as render checkbox control. Do you know how do I bind that to a variable via ngModel to that checkbox or set initial value of checkbox that is dependent on the variable and then change variable when checkbox state changes?

Splaktar · 2018-06-21T22:49:23Z

@amoguilner I haven't played with that advanced use case yet. It sounds quite interesting. It would be helpful if you had a Stackblitz to look at. I would also guess that Reactive Forms would be more capable for something like this compared to Template Driven Forms.

@sashagrunge Please post a Stackblitz demo of what you are referring to.

alex-vas · 2020-06-22T23:25:49Z

It is appeared to be quite tricky to implement model driven recursive menu in angular material. Quite a few examples out there are not compatible with angular past 8.0. This issue is discussed here: #16457 in details.

For those looking for an example working with 9+ angular, @Harpush has pointed to this https://stackblitz.com/edit/dynamic-material-menu-angular-8 in his comment here.

nzbin · 2020-11-22T15:27:59Z

@Mayocampo Glad that it could help, thanks for the feedback :)

Yeah, I didn't hook up the routing to be generated dynamically. That's another topic that I haven't dug into just yet :) So yes, for now I just make sure that the app-routing.module.ts includes the routes that are specified in my config.

Here's another Stackblitz with routing hooked up plus a top level menu button bar: https://stackblitz.com/edit/dynamic-nested-topnav-menu?file=app%2Fapp.component.html

I'll be presenting on this at AngularMix on Thursday. Then I'll share my slides and some more examples (including a dynamic SideNav menu).

Hopefully I'll have time to put together the docs as well, but that will have to wait until later in November most likely.

Many thanks for your examples, in the recursive nested menu, routerLinkActive is not working, how can I add a active class?

nzbin · 2021-01-09T09:47:42Z

@Mayocampo Glad that it could help, thanks for the feedback :)
Yeah, I didn't hook up the routing to be generated dynamically. That's another topic that I haven't dug into just yet :) So yes, for now I just make sure that the app-routing.module.ts includes the routes that are specified in my config.
Here's another Stackblitz with routing hooked up plus a top level menu button bar: https://stackblitz.com/edit/dynamic-nested-topnav-menu?file=app%2Fapp.component.html
I'll be presenting on this at AngularMix on Thursday. Then I'll share my slides and some more examples (including a dynamic SideNav menu).
Hopefully I'll have time to put together the docs as well, but that will have to wait until later in November most likely.

Many thanks for your examples, in the recursive nested menu, routerLinkActive is not working, how can I add a active class?

I have solved my own problem, take a look at the link below.
https://ng-matero.github.io/ng-matero/dashboard (switch top navigation to check the recursive nested menu)

Splaktar mentioned this issue Oct 2, 2017

Can't bind to 'mdMenuTriggerFor' since it isn't a known property of 'button' #2478

Closed

andrewseguin added the area: material/menu label Jun 11, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs(menu): add example of nested menus using dynamic data #7434

docs(menu): add example of nested menus using dynamic data #7434

Splaktar commented Sep 30, 2017

Splaktar commented Oct 2, 2017

Splaktar commented Oct 2, 2017

Splaktar commented Oct 2, 2017 •

edited

Loading

cpboyd commented Oct 5, 2017

Mayocampo commented Oct 7, 2017

Splaktar commented Oct 7, 2017

Splaktar commented Oct 8, 2017 •

edited

Loading

Mayocampo commented Oct 9, 2017

Splaktar commented Oct 9, 2017

cpboyd commented Oct 9, 2017

Mayocampo commented Oct 10, 2017

Splaktar commented Oct 10, 2017 •

edited

Loading

ghost commented Oct 13, 2017 •

edited by ghost

Loading

Splaktar commented Oct 13, 2017

Smitha-Patil commented Nov 21, 2017

Swoox commented Nov 28, 2017

d-damien commented Feb 20, 2018 •

edited

Loading

d-damien commented Feb 21, 2018 •

edited

Loading

irowbin commented Feb 22, 2018

d-damien commented Feb 22, 2018

d-damien commented Feb 22, 2018

qpi commented Feb 23, 2018

irowbin commented Feb 24, 2018

CharlyRipp commented Apr 3, 2018 •

edited

Loading

sashagrunge commented Apr 10, 2018

Splaktar commented Apr 10, 2018

irowbin commented Apr 11, 2018

sashagrunge commented Apr 11, 2018

amoguilner commented Jun 20, 2018 •

edited

Loading

Splaktar commented Jun 21, 2018 •

edited

Loading

alex-vas commented Jun 22, 2020

nzbin commented Nov 22, 2020

nzbin commented Jan 9, 2021

docs(menu): add example of nested menus using dynamic data #7434

docs(menu): add example of nested menus using dynamic data #7434

Comments

Splaktar commented Sep 30, 2017

Bug, feature request, or proposal:

What is the expected behavior?

What is the current behavior?

What are the steps to reproduce?

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Is there anything else we should know?

Splaktar commented Oct 2, 2017

Splaktar commented Oct 2, 2017

Splaktar commented Oct 2, 2017 • edited Loading

cpboyd commented Oct 5, 2017

Mayocampo commented Oct 7, 2017

Splaktar commented Oct 7, 2017

Splaktar commented Oct 8, 2017 • edited Loading

Mayocampo commented Oct 9, 2017

Splaktar commented Oct 9, 2017

cpboyd commented Oct 9, 2017

Mayocampo commented Oct 10, 2017

Splaktar commented Oct 10, 2017 • edited Loading

ghost commented Oct 13, 2017 • edited by ghost Loading

Splaktar commented Oct 13, 2017

Smitha-Patil commented Nov 21, 2017

Swoox commented Nov 28, 2017

d-damien commented Feb 20, 2018 • edited Loading

d-damien commented Feb 21, 2018 • edited Loading

irowbin commented Feb 22, 2018

d-damien commented Feb 22, 2018

d-damien commented Feb 22, 2018

qpi commented Feb 23, 2018

irowbin commented Feb 24, 2018

CharlyRipp commented Apr 3, 2018 • edited Loading

sashagrunge commented Apr 10, 2018

Splaktar commented Apr 10, 2018

irowbin commented Apr 11, 2018

sashagrunge commented Apr 11, 2018

amoguilner commented Jun 20, 2018 • edited Loading

Splaktar commented Jun 21, 2018 • edited Loading

alex-vas commented Jun 22, 2020

nzbin commented Nov 22, 2020

nzbin commented Jan 9, 2021

Splaktar commented Oct 2, 2017 •

edited

Loading

Splaktar commented Oct 8, 2017 •

edited

Loading

Splaktar commented Oct 10, 2017 •

edited

Loading

ghost commented Oct 13, 2017 •

edited by ghost

Loading

d-damien commented Feb 20, 2018 •

edited

Loading

d-damien commented Feb 21, 2018 •

edited

Loading

CharlyRipp commented Apr 3, 2018 •

edited

Loading

amoguilner commented Jun 20, 2018 •

edited

Loading

Splaktar commented Jun 21, 2018 •

edited

Loading