0

I'm very new for SPA and i have a question about organizing of cross-zone side-menu, which has different content on each zone. So i want that content of menu changes dynamically every time when user go to new zone.

I can't pass any data to menu's component via @Input(), because component creates just one time and it does not possible to pass actual data to component every time when need.

I don't want to create unique side-menu for any application zone, because menu has any common elements for all zones.

So my question is how to update data of the common component according to current using component. For illustrate my question:

root component

template: `
    <div>
        <side-menu></side-menu>
        <div>
            <router-outlet></router-outlet>
        </div>
    </div>
`

and structure of my app is

app
|--components
|   |--folder1
|   |--folder2
|   |--shared
|       |--side-menu.component.ts
|
|--services
|   |--folder1
|   |--folder2
..............

In side-menu component i need to render only that element that needs depends on actual state of aaplication. Maybe creating several same menus for each zone is the more prefer way?

I suppose that it is the common problem for SPA, not only for Angular 2, so maybe you provide me conceptual solution for my problem.

user3272018
  • 2,309
  • 5
  • 26
  • 48
  • Use a shared service. There are tons of similar questions with examples. – Günter Zöchbauer Feb 18 '16 at 18:17
  • 2
    I had a similar question regarding doing a universally accessible dialog. Solution would be similar to a menu that had different states: http://stackoverflow.com/questions/34572539/how-to-make-a-component-universally-accessible-in-angular2/34572894#34572894 – brando Feb 18 '16 at 20:57

0 Answers0