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(). 

By Shabazz

Software Engineer, MCSD, Web developer & Angular specialist

Leave a Reply

Your email address will not be published. Required fields are marked *