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