/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 vote162 views1 answer
Angular get element by classname
Javascript AngularJS
13 votes156 views2 answers
Import angular flex layout
Javascript AngularJS
24 votes184 views2 answers
Angular 10 filter date time
Javascript AngularJS
0 vote195 views1 answer
Angular disabled condition based
Javascript AngularJS
5 votes169 views2 answers
Generate component with module angular 8
Javascript AngularJS
5 votes166 views1 answer
Angular open poort in network
Javascript AngularJS
-1 vote177 views1 answer
How to do a timer angular
Javascript AngularJS
0 vote155 views1 answer
Put validation on the cell number in angular
Javascript AngularJS
2 votes153 views1 answer
Get current url angular
Javascript AngularJS
55 votes312 views2 answers
Angular start command
Javascript AngularJS