How to pass data between any component levels



Is possible to use EventEmitter to pass data thought anyone component level?
I mean… send data from component 04 to app component?

The component hierarchy is below:

– app component
---- comp 01
-------- comp 02
-------- comp 03
--------------comp 04

My code is based here:

The difference is that I have four level from emit() that passing data to app component.

The problem is that my app component getNotification() function isn’t called.


I don’t think EventEmitter bubbles like DOM events. You will have to keep passing the emitter in each component which is really not a best solution.

But instead you may do one of the following,

  • Use a service and subscription
  • Use ngrx / redux


I’m trying to use Unrelated sharing Data with a Service but the parent component that subscribed on ngOnInit don’t receive the data

The Unrelated Components: Sharing Data with a Service section as below:

The same implementation but more simple to understand


Solved, the providers: [MyService] needs to set in app.module.ts to use only one instance.

How to pass data between any component without Observable and subscribe()