Angular2 Communicating between sibling components

emitter.service.ts

import {Injectable, EventEmitter} from 'angular2/core';

@Injectable()
export class EmitterService {
  private static _emitters: { [ID: string]: EventEmitter<any> } = {};

  static get(ID: string): EventEmitter<any> {
    if (!this._emitters[ID]) 
      this._emitters[ID] = new EventEmitter();
    return this._emitters[ID];
  }
}

example.component.ts

import {Component, Input, OnChanges} from 'angular2/core';
import {EmitterService} from './emitter.service';

@Component({ selector: 'dispatcher', template: '' })
class DispatcherComponent implements OnChanges {
  @Input() id: string;
  private value = "dispatcher component value";
  
  doStuff() {
    EmitterService.get(this.id).emit(value);
  }
}
@Component({ selector: 'listener', template: '' })
class ListenerComponent implements OnChanges {
  @Input() id: string;

  ngOnChanges() {
    EmitterService.get(this.id).subscribe(value => console.log(value));
  }
}

@Component({
  providers: [EmitterService],
  selector: 'host',
  template: `
    <dispatcher [id]="host_id"></dispatcher>
    <listener [id]="host_id"></listener>
  `
})
export class HostComponent {
  public host_id: "HOST_COMPONENT";
  
  constructor(private _emitterService: EmitterService) {}
}

Helped me to do my task.
thanks

Really helped me out, thank you.

thank you for the code

Thanks for sharing, it helps a lot !

Hello mate, thanks for sharing! I am trying to call a function of a component from a sibling component. Any idea on how to do it? Thanks in advance!

Thanks! really helpful.
Q - those the components must be siblings? As I see the can be totally foreign components that only share the service.
Or I just got it wrong?

nice one .. thanks

EventEmitter is not meant to be used inside a service. They should be used only for emitting custom events inside components. You can use RxJS BehaviorSubject instead!

This very nice example, for communication between cross components.

I am facing below issues. Please help me.
Created one parent component and name is product component. inside product component i have two child component and these child components are siblings.
1, product info and
2, product details.
I am looping these siblings product from parent component.
In side product info component i have one button as a show details. When i click on show detail button needs to display in product detail component.
for acheving this i used event emmiter service.
When i subscribing event emitters service in product details component it's looping

I am facing below issues. Please help me.
Created one parent component and name is book-list component.and another one component is created if i click book-list component book title how to come book-details in book-details page