/Javascript/AngularJS/Angular 4 execute function from another component

Angular 4 execute function from another component

//Angular 4 execute function from another component

 didn't get time to test it but similar solution worked for me. the code created for your need.

Create a service like this

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

}
then implement in your header component like 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 your store component like this

@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);
    }
 }
The concept is that you can use observable in a service and subscribe in the component where you want it (store.component) and can send event from anywhere in the app like i did in the header.component

I hope it will help you

Similar codes

0 vote126 views1 answer
Addclass to elementref angular
Javascript AngularJS
0 vote114 views1 answer
Is an Angular component, then verify that it is part of this module.
Javascript AngularJS
0 vote127 views1 answer
Formgroup is not property of form angular
Javascript AngularJS
0 vote115 views1 answer
Command to create custom pipe in angular 6
Javascript AngularJS
0 vote121 views1 answer
Angular 10 get unique values from array of objects
Javascript AngularJS
0 vote131 views1 answer
Angular json to file and download
Javascript AngularJS
0 vote120 views1 answer
Angular erro ao adicionar um projeto no firebase Failed to make request to https://www.gstatic.com/firebasejs/releases.json
Javascript AngularJS
0 vote138 views1 answer
Get page link angular
Javascript AngularJS
1 vote125 views1 answer
What is the best way to conditionally apply attributes in AngularJS?
Javascript AngularJS
2 votes110 views2 answers
Angular display block
Javascript AngularJS