Trigger function with event emitter

user_7014356 0
Viewed 661

Is it possible to trigger a function in another component from the current component with EventEmitter, as sort of a callback? For example, after I finish the API request a success function occurs, like so:

@Output() afterAPIRequest = new EventEmitter();

handleSuccess() {
   this.afterAPIRequest.emit();
}

Now, can I catch that somehow in another component and trigger another function, something like this?

// when emitted, run this

refreshListIfEmitted() {
   this.refreshMyList();
}
angular typescript javascript
1 Answers

use a service

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';

@Injectable()
export class MessageService {
  private _message: Subject<any>;

  constructor() {
    this._message = new Subject();
  }

  get changes(): Observable<any> {
    return this._message.asObservable();
  }

  set message(message: any) {
    this._message.next(message);
  }
}

component one

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-one',
  templateUrl: './one.component.html',
  styleUrls: ['./one.component.scss'],
})
export class OneComponent {
  constructor(private _http: HttpClient, private _message: MessageService) { }

  apiRequest(): void {
    this._http.get('end-point').subscribe(value => this._message.message = value);
  }
}

component two

import { Component } from '@angular/core';

@Component({
  selector: 'app-two',
  templateUrl: './two.component.html',
  styleUrls: ['./two.component.scss'],
})
export class TwoComponent {
  constructor(private _message: MessageService) {
    this._message.changes.subscribe(value => console.log(value));
  }
}
user_31492490
Related