Angular 4 execute function from another component -

i'm build webapp using angular4 , i'm trying create button call functions on other components.

i reading other similar questions here, have scenario components child or sibling components declaration on html, e.g.:

<parent-component>     <child-component></child-component>     <sibling-component></sibling-component> </parent-component> 

however, i'm working on different scenario, because components invoked via routing , can't make work.

basically have header on page controls execute functions, these functions need trigger/change data on other components loaded via routing.

for example, have routing /store show list of stores, have drawer on page want show when user clicks on button on header, problem, because can't propagate event headercomponent storecomponent.

these files:

header.component.ts

@component({     selector: 'header',     templateurl: `         <section class="container">             <button (click)="clickfilter()">open filter</button>         </section>     ` })  export class headercomponent {     @output() onfilter: eventemitter = new eventemitter();      clickfilter():void {         this.onfilter.emit('register click');     } } 

store.component.ts

@component({     templateurl: 'store.html' })  export class storecomponent {     onfilterclick(event) {         console.log('fire onfilterclick: ', event);     } }  // store.html <article class="card" (onfilter)="onfilterclick($event)">     test </article> 

but not working.

also, don't need call function, pass boolean value, example, bind property on storecomponent , toggle div inside html file.

i didn't time test similar solution worked me. code created need.

create service this

import { injectable } '@angular/core'; import { observable } 'rxjs/observable'; import { subject } 'rxjs/subject';  @injectable() export class messageservice {     private _listners = new subject<any>();      listen(): observable<any> {        return this._listners.asobservable();     }      filter(filterby: string) {        this._listners.next(filterby);     }  } 

then implement in header component this

// header.component.ts @component({     selector: 'header',     templateurl: `         <section class="container">             <button (click)="clickfilter()">open filter</button>         </section>     `  })  export class headercomponent {      @output() onfilter: eventemitter = new eventemitter();       constructor(private _messageservice: messageservice){}      clickfilter():void {          // this.onfilter.emit('register click');          this._messageservice.filter('register click');      }  } 

then use in store component this

@component({     selector: 'store',     template: `<article class="card">                  test               </article>` })  export class storecomponent {     constructor(private _messageservice: messageservice){         this._messageservice.listen().subscirbe((m:any) => {             console.log(m);             this.onfilterclick(m);         })     }      onfilterclick(event) {         console.log('fire onfilterclick: ', event);     }  } 

the concept can use observable in service , subscribe in component want (store.component) , can send event anywhere in app did in header.component

i hope you