Submenu with angular2

Question

I have a menu on the left side of the page and there has to be another menu on the left which is a submenu of the selected menu. For this to work i've created a non-terminal route '/section/...' and created a component with another router outlet in it. The component in "section" folder is also a router component. I had to use links like this to make it work (the "./" had to be added here for the links to be specific to this subcomponent):

<a [routerLink]=" ['./Index'] ">Index</a>
<a [routerLink]=" ['./Test'] ">Test</a>

Everything works perfectly, but i would like to turn those hrefs that are currently my submenu into another separate component. I don't want to hardcode my menu in every section, i'd rather just place a tag and somehow specify the links to be added to that submenu. The problem here is i'm stuck and don't know how i could pass those links into the submenu component so that they would still point to the correct locations. So what would be the best way to create such a submenu component and pass a list of links to it?

What Angular2 version are you using? Is it really necessary to make submenus routed components? Why not just creating a tree structure and just route the component displayed when a link is clicked? Maybe I misinterpreted your question. — Günter Zöchbauer, May 09 '16 at 09:31
I'm not sure on the version, not even sure where to look for (using webpack). There is probably no need for submenu rooted components, it's just the only way i knew of doing it. Also, some submenus are going to be enhanced with additional functionality (more like side bars) so i wanted the sidebar div to be in the feature group. How would you recommend doing it? — marius, May 09 '16 at 09:38
I would use the router for this purpose only when I want the navigation from parent to submenu reflected in the URL. This is reasonable, I just can't tell if this is important for your use case. Otherwise you can for example add submenus as components like shown in http://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components/36325468#36325468. Only the navigation to a terminal menu item would then be reflected in the browsers URL bar. — Günter Zöchbauer, May 09 '16 at 09:43
You should see the Angular2 version in the script tags of you `index.html` (like `` or your `package.json` or `config.js` — Günter Zöchbauer, May 09 '16 at 09:50
Basically the navigation should be reflected in the url as the parent menu is linking to specific feature groups of the project (like /users). Submenu links should also be reflected (like /users/someuser). And since every feature group might use the submenu area differently (might not even use it at all or might use something else instead of the submenu there), i'd like to separate out the submenu component itself so that each feature could choose if and where exactly to include it. — marius, May 09 '16 at 09:52
I only have webpack starter script in my html. Manage to find the version though through package.json: 2.0.0-beta.15 — marius, May 09 '16 at 09:53
So the router needs to add a submenu component in the navbar and when a terminal menu item is clicked another component into a router-outlet of the main area of your page? The new router (rc.1) will provide better support for your use case (if my assumptions about your requirements are correct) where multiple router-outlets can be addressed by one route. I don't know though if this is already working. I just read about it in the design docs. — Günter Zöchbauer, May 09 '16 at 10:04
Basically, yes. Although it doesn't have to be the router that does all this. Like right now it just loads the main area which is basically another router with a menu and another router outlet (the actual content) and i'm ok with this as well. — marius, May 09 '16 at 10:19
Sounds weird to me. Doesn't this produce a conflict about which router controls the browsers URL bar? — Günter Zöchbauer, May 09 '16 at 10:21
Well yes, that's why i have to use "./Index" instead of "Index" in the routerLink — marius, May 09 '16 at 11:15

score 0 · Answer 1 · answered May 09 '16 at 11:24

I solved a similar use case by using a single parameter of the route for the menu path and the other part of the path for the actual content with a route path like

http://myapp/main_menu.sub_menu3.sub_sub_menu5/some_content/details

witha route config like

{path: '/:menu/...', name: 'MainArea', component: MainAreaComponent}

I inject the router to the navbar component and listen to changes and update the navbar-view depending on the passed menu parameter and call this.router.navigate(...) with an updated menu parameter value reflecting the navigation change in the menu and the path required to show the main content depending on the selected menu.

Submenu with angular2

1 Answers1