title: Angular 2 broadcasting events to notify other components
body: <p>So I'm actually loosing my mind. I'm new to Angular 2 and I'm trying to understand how to let sibling child components comunicate between each other.</p>
  
  <p>I have <strong>n</strong> child components that can play an <strong>Audio</strong> file. </p>
  
  <p>The goal is to stop playing component if someone is started. </p>
  
  <p>E.G. : component 1 is played, I play start on component 2, component 1 is stopped, component 2 is played.</p>
  
  <p>I tried with shared service with no luck and also trying with <code>EventEmitter</code> comunicating from child to parent but it is not working.
  I cannot figure out how to notify all components at once.</p>
  
  <p><strong>RegistrationComponent</strong> ( child )</p>
  
  <pre><code>import {Component, Input, Output, EventEmitter} from '@angular/core';
  import {Path} from "./data-model";
  import {MediaPlugin} from '@ionic-native/media';
  import {Platform} from 'ionic-angular';
  import {SocialSharing} from '@ionic-native/social-sharing';
  import {RegistrationService} from './registration.service';
  
  @Component({
    selector: 'registration',
    template: `
        &lt;div class="reg__name"&gt;{{ url.name }}&lt;/div&gt;
        &lt;button ion-button color="secondary" item-right clear large (click)="toggle(url.path);"&gt;
          &lt;ion-icon [name]="playing ? 'md-square' : 'md-play'"&gt;&lt;/ion-icon&gt;
        &lt;/button&gt;`,
    providers: [
      MediaPlugin,
      SocialSharing,
      RegistrationService
    ]
  })
  
  export class RegistrationComponent {
  
    @Input() url: Path;
  
    @Input() someonePlaying: boolean = false;
  
    @Output() onPlayed = new EventEmitter&lt;boolean&gt;();
  
    playing: boolean = false;
  
    mediaContainer: any;
  
    path: string;
  
    constructor(private media: MediaPlugin,
                private platform: Platform,
                private socialSharing: SocialSharing,
                private service: RegistrationService) {
  
      this.path = "assets/audio";
  
      // service.playing.subscribe(val =&gt; this.onSomeonePlaying(val));
  
    }
  
    ngOnChanges() {
      console.log(this.someonePlaying);
    }
  
    toggle(filename) {
      this.playing
        ? this.stop()
        : this.play(filename)
    }
  
    play(fileName) {
      const mp3URL = this.getMediaURL(`${this.path}/${fileName}`);
      this.mediaContainer = this.media.create(mp3URL);
  
      this.mediaContainer.play();
      this.playing = true;
      this.onPlayed.emit(true);
    }
  
    stop() {
      this.mediaContainer.stop();
      this.playing = false;
      // this.service.stop();
    }
  
    share() {
      this.socialSharing.shareViaWhatsApp("Condividi su Whatsapp", "", "");
    }
  
    onSomeonePlaying(val: boolean) {
      console.log(val);
    }
  
    getMediaURL(s) {
      let isAndroid = this.platform.is("android");
      return isAndroid ? `/android_asset/www/${s}` : s;
    }
  
  
  }
  </code></pre>
  
  <p><strong>Portion of home.html that prints the components</strong></p>
  
  <pre><code>    &lt;ion-item *ngFor="let url of currentUrls"&gt;
    &lt;registration (onPlayed)="onPlayed($event)"
                  [(someonePlaying)] = "globalPlaying"
                  [url]="url"&gt;&lt;/registration&gt;
  &lt;/ion-item&gt;
  </code></pre>
  
  <p>*home.ts**</p>
  
  <pre><code>import {Component} from '@angular/core';
  import {NavController} from 'ionic-angular';
  import {Registrations, Registration} from './data-model';
  
  @Component({
    selector: 'page-home',
    templateUrl: 'home.html'
  })
  
  export class HomePage {
  
    path: string;
  
    urls: Array&lt;any&gt;;
  
    currentUrls: Array&lt;{name: string, path: string}&gt;;
  
    globalPlaying: boolean = false;
  
    constructor(public navCtrl: NavController) {
  
      this.path = "assets/audio";
      this.urls = Registrations;
  
      this.currentUrls = [];
  
      for (let i = 0; i &lt; this.urls.length; i++) {
        this.currentUrls = this.currentUrls.concat(this.urls[i]["paths"]);
      }
  
    }
  
    onChange(key) {
      this.currentUrls = this.filter(key);
    }
  
    onPlayed(val){
      console.log("global playing", val);
      this.globalPlaying = true;
    }
  
    filter(key) {
      if (!key || key === "all")
        return this.findAll(this.urls);
  
      return this.findWhere(this.urls, key)["paths"];
    }
  
    findAll(collection) {
      let array = [];
      for (let i = 0; i &lt; collection.length; i++) {
        array = array.concat(collection[i]["paths"]);
      }
  
      return array;
    }
  
    findWhere(collection, key) {
      for (let i = 0; i &lt; collection.length; i++) {
        if (collection[i]["id"] === key)
          return collection[i];
      }
    }
  
  }
  </code></pre>