CODEWITHSUNDEEP
angularangular-ui-router
Makla
Makla

Reputation: 10469

Angular2 - Change menu in parent Component from child inside router-outlet

I have menu and secondary menu component. I would like to change items in secondary menu based on component I displayed in router-outlet tag.
My menu navigation has multiple levels (classic tree), but in secondary menu I want to display only last level.

How? I already read component-communication cookbook and I think problem could be solved with Parent and children communicate via service.

But I keep asking myself, if this is the best approach for this problem?

const routes: Routes = [
    { path: "", component: HomePage },
    {
        path: "team-support", component: TeamSupportPage,       //secondary menu + router-outlet
        children: [
            { path: '', component: TeamSupportHomePage },
            { path: 'add', component: TeamSupportTaskAddPage },
            {
                path: 'project/:id',
                component: TeamSupportProjectPage,              //this component should change secondary menu for TeamSupportPage component
                children: [
                    { path: '', component: TeamSupportProjectDashboardPage },
                    { path: 'jobs', component: TeamSupportProjectJobsPage }
                ]
            },
        ]
    }
];

Edited: I want to achieve same functionality that online shops have, where you can navigate in depths, but secondary links changes:
When you are on root page, links are computer, garden, tools, ...
When you click computers, links changes to: monitors, disks, ...
When you click monitors, links changes to: led, oled, flat, ...

Change is conditional: if lower page does not have links, old are used. I could manually add them to every page, but I want to avoid adding them to every page.

Upvotes: 1

Views: 800

Answers (1)

Virmundi
Virmundi

Reputation: 2631

Please look at the event based communication between the parent and child [1]. When the child loads, or some time soon after that, the child will emit an event for the menu. The event itself will contain the menu items. The parent will listen to the event. When triggered, the parent will update the menu appropriately.

The event allows you to break the responsibilities along functional lines. The parent is responsible for general rendering. The child it responsible for creating the logical links to its own data.

1 - https://angular.io/guide/component-interaction#parent-listens-for-child-event

Upvotes: 1

Related Questions