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

[Splaktar]

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]

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

[Splaktar]

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

[Splaktar]

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]

@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]

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]

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

[Splaktar]

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]

@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]

@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]

@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!