Angular 2 how to send events from grandchild to parent component?

Question

I have a GridComponent inside a PopupComponent.

I want to send an "RowSelected" custom event to a component outside of PopupComponent.

I am currently sending the event from GridComponent to PopupComponent and forwarding it to the outside. This is an very painful approach since I plan on having tons of PopupComponents.

Is there any other way to do event forwarding?

Answer 1

Whenever you don't have a direct parent → child relationship, use a (shared) service to share data and/or send events.

Inside the service, use a Subject or an Observable to accomplish this.

The cookbook has an example of how to use a Subject to achieve bi-directional communication between components.

This SO post, Delegation: EventEmitter or Observable in Angular2, has an example of how to use an Observable.