How do I get an event from one parent component to a child-component in angular 8?

Question

I want to get an event that is fired relatively on the top of the dom-hierarchy to a child component further down the hierarchy.The child is not a direct child of the parent

I understand that I do that with the input-decorator. Please note doing it the other way around like it should be is not possible.

The html of the parent looks like this

<element [data]="viewData" (anext)=OnNext($event)></element>

I need to get the $event available in the child. How do I achieve this?

Answer 1

You can create a service with an rxjs Subject, as shown in the psuedo code below.

//Evservice.ts

public subject = new Subject();
OnNext(event) {
   subject.next(event)
}

//childComponent.ts
constructor(ser: Evservice)

ser.subject.subscribe((ev) => {//access your event here});