Usually we use @Output() and EventEmitter (from Angular/core)
to emit an event to parent component.
@Output() addTab = new EventEmitter<any>();
...
//then
addTab.emit();
How should we proceed in the reverse order? from parent to child?
Using RxJs, you can declare a Subject
in your parent component and pass it as Observable
to child component, child component just need to subscribe to this Observable
.
Parent-Component
eventsSubject: Subject<void> = new Subject<void>();
emitEventToChild() {
this.eventsSubject.next();
}
Parent-HTML
<child [events]="eventsSubject.asObservable()"> </child>
Child-Component
private eventsSubscription: Subscription;
@Input() events: Observable<void>;
ngOnInit(){
this.eventsSubscription = this.events.subscribe(() => doSomething());
}
ngOnDestroy() {
this.eventsSubscription.unsubscribe();
}
PS: Converting eventsSubject to an Observable, prevent the child-component to call next().