How do I create a publisher/subscriber model in Angular?

Question

I've been playing with Angular and have been trying to find a way to use a pub/sub mechanism across the whole component tree.

It seems that EventEmitter is only emitting an event that can be subscribed to one level up - but not more. Similarly, it only emits the events up the tree but now down.

plunker

The relevant code is here:

class App {
  onAncestor($event) {
     console.log('in ancestor, decendent  clicked',$event);
  } 
}

 ...
class Entities {
   ....
   onParent($event) {
     console.log('in entities parent, child  clicked',$event);
   } 

   onGrandParent($event) {
      console.log('in grand parent, grandschild  clicked',$event);
   } 

}

Only onParent is called, never onGrandparent or onAncestor. Similarly it wont publish downwards either.

Solution

With Angular 2 comes an observables library called RxJs, so that can be used to create a service that we can subscribe to and submit events.

Then we use the dependency injection mechanism to inject that service anywhere on the application where we need it.

So there is no need anymore for the broadcast/emit event mechanism as it was replaced by the more powerful observables mechanism, which is built-in everywhere in the framework: EventEmitter is an observable, form values are observables, http can return observables etc.

See this repository for examples of how to build services using RxJs for publish/subscribe.

Comments

[TGH]

Here is an example of how to use Observables/EventEmitter for pub sub syntaxsuccess.com/viewarticle/pub-sub-in-angular-2.0

[Lior]

thank you. if so, then why Angular2 has an EventEmitter at all?

[Angular University]

have a look at the comments on the class EventEmitter github.com/angular/angular/blob/master/modules/angular2/src/‌​…