Subscribe multiple Angular2 components to a Service

Question

I am trying to make two Components to get notified through a Service when another Component reacts to a DOM event.

This should be achieved using RxJS Subject Observable, or its direct subclasses(BehaviorSubject or ReplaySubject probably).

This is the model:

TriggerComponent
NotificationService
FirstListeningComponent
SecondListeningComponent

Neither of these three components are parent-child.

I tried to follow these approaches:

but I didn't manage to adapt them for my needs.

Please check my live example on plnkr.co

Am I on the right path?

Thank you

score 3 · Accepted Answer · answered Sep 21 '16 at 16:15

I fixed your plunker with a working version.

The problem was that new instances of the NotificationService were created for every component. It should exist only one instance, created in the main component, and the components should share that instance to comunicate.

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <br>
      <trigger-component></trigger-component>

      <first-listening-component></first-listening-component>
      <second-listening-component></second-listening-component>
    </div>
  `,
  providers : [NotificationService]
})
export class App {
  constructor() {
    this.name = 'Angular2'
  }
}

Subscribe multiple Angular2 components to a Service

1 Answers1