How to trigger function from one component to another in angular2?

I would probably use a service that uses a Subject. This way it can be both published to and subscribed from

import { Subject } from 'rxjs/Subject';

class SomeService {
  private _subject = new Subject<any>();

  newEvent(event) {
    this._subject.next(event);
  }

  get events$ () {
    return this._subject.asObservable();
  }
}

The from your components, one can publish and one can subscribe

@NgModule({
  providers: [ SomeService ]
})
class AppModule {}

@Component()
class ComponentOne {
  constructor(private service: SomeService) {}

  onClick() {
    service.newEvent('clicked!');
  }
}

@Component()
class ComponentTwo {
  constructor(private service: SomeService) {}

  ngOnInit() {
    this.service.events$.forEach(event => console.log(event));
  }
}

See also:

  • Getting Started on Subjects

Use RxJS SUBJECT (~EventEmitter):import { Subject } from 'rxjs/Subject';

Subject service will allow you to enable bi-directional communication for a parent component and its children.

Reference : https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

For more details of

RxJs SUBJECT

check this one : https://www.youtube.com/watch?v=rdK92pf3abs

Tags:

Angular