Angular 4 execute function from another component

Question

I am creating a webapp using Angular4, and I am trying to create a button for calling functions on other components.

I read other similar questions here, but they have a scenario in which the components are child or sibling components with an declaration in html, for example:

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

However, I am working with a different script because my components are called through routingand I cannot get it to work.

Basically, I have headera page with some controls for executing functions, but these functions should run / modify data on other components loaded through routing.

For example, I have routing /storeto show a list of stores, I also have a box on this page that I want to show when the user clicks a button on the header, this is a problem because I cannot pass the event from HeaderComponentto StoreComponent.

These are my 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 that does not work.

In addition, I really do not need to call the function, I could just pass a boolean value, for example, associate a property with a StoreComponent and then switch the div inside the html file.

Answer 1

I did not have time to test, but a similar solution worked for me. code created for your needs.

Create such a service

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subject } from '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);
    }

}

,

// 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');
     }
 }

,

@Component({
    selector: 'store',
    template: `<article class="card">
                 Test
              </article>`
})

export class StoreComponent {
    constructor(private _messageService: MessageService){
        this._messageService.listen().subscribe((m:any) => {
            console.log(m);
            this.onFilterClick(m);
        })
    }

    onFilterClick(event) {
        console.log('Fire onFilterClick: ', event);
    }
 }

, , (store.component), , header.component

,

Answer 2

, . , . :

header.component.ts

@Component({
selector: 'header',
templateUrl: `
    <section class="container">
        <button (click)="myFunction()">Open filter</button>
    </section>
`})
export class HeaderComponent {
   @Input() myFunction: Function;
}

// store.html
<header [myFunction]="functionOnStore"></header>

functionOnStore store