Angular 2 component to component communication -

i have top menu (component) displays list of models, , side menu (component) displays list of colors. in center of page have table (component) displays list of things based on user selections of color , model controls. none of controls child of other. table component rendered in router-outlet container.

how can make table component listen property changes in 2 menu components?

i have tried session service described here: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-servicehttps://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

it not work because table component not child of menu components.

i make simple service it:

@injectable() export class filterservice {     public modelchange$:eventemitter;     public colorchange$:eventemitter;      constructor(){         this.modelchange$ = new eventemitter();         this.colorchange$ = new eventemitter();     }      public setmodel(model):void{         this.modelchange$.emit(model);     }      public setcolor(color):void{         this.colorchange$.emit(color);     } } 

then topmenucomponent , sidemenucomponent invoke service's setters:

constructor(private _filterservice:filterservice){} // method invoked user's action onselect(value) {     this._filterservice.setmodel(value); // or setcolor() } 

and tablecomponent subscribe events:

constructor(private _filterservice:filterservice){     this._filterservice.modelchange$.subscribe(model => console.log("new model: " + model));     this._filterservice.colorchange$.subscribe(color => console.log("new color: " + color)); } 

i used interior artist show how work:

hope helped.