Communicate between sibling components Angular 2

Question

I tried to follow this answer but its too confusing Angular 2 event catching between sibling components

I want to call a method in child component 1 when something is clicked on child component 2

Child component 2 emits an event called trackClick.

Parent Component:

<div>

    <audio-player></audio-player>

    <audio-albums></audio-albums>

</div>

Child Component 1 (audio-player)

// Don't know what to do here, want to call this function

trackChanged(track){
    console.log("YES!! " + track);
}

Child Component 2 (audio-albums)

<li class="track" (click)="playTrack(track)"> </li>

@Output() trackClick = new EventEmitter<any>();

playTrack(track):void{
    console.log("calling playTrack from child 2:" + track);  
    this.trackClick.next([track]);
}

kit · Accepted Answer · 2016-08-26T06:38:55.320

you can't do it like this. first you have to get child2 in parent by using @ViewChild(Child2) (it's important to select ViewChild by component not by string). then you have to catch the event in parent and execute whatever method you want on child2. more or less something like this:

import { AudioAlbumsComponent }  from '...';
import { AudioPlayerComponent }  from '...';

@Component({ 
  template: `
    <div>
      <audio-player></audio-player>
      <audio-albums (trackClick)="onTrackClicked($event)"></audio-albums>
    </div>`,
  directives: [AudioPlayerComponent, AudioAlbumsComponent],
}) 

export class Parent {
  @ViewChild(AudioPlayerComponent) private audioPlayer: AudioPlayerComponent;

  onTrackClicked($event) {
    this.audioPlayer.trackChanged($event);
  }

}

ok i was afraid it would have to be child2->parent->child1, thanks ill try — Sumama Waheed, Aug 24 '16 at 20:35

score 8 · Answer 2 · edited Aug 25 '16 at 05:10

8

An alternative (template-only way) is

<audio-player #audioPlayer></audio-player>
<audio-albums (trackClick)="audioPlayer.trackChanged($event)"></audio-albums>

The event handler references <audio-player> by the template variable #audioPlayer.

edited Aug 25 '16 at 05:10

Sumama Waheed

3,579
3
18
32

answered Aug 25 '16 at 04:45

Günter Zöchbauer

623,577
216
2,003
1,567

3

oh nice this is much better instead of going through parent...thanks! – Sumama Waheed Aug 25 '16 at 05:07

score 2 · Answer 3 · answered Aug 24 '16 at 20:37

Something like this:

Parent

<div>
    <audio-player (trackchanged)="trackChanged($event);></audio-player>
    <audio-albums></audio-albums>
</div>

@ViewChild(Child2) child2Component: Child2Component;

trackChanged(value:any) {
 child2Component.trackChanged(value);
}

Child1

...
@Output() trackchanged= new EventEmitter();
...
playTrack() {
    this.trackchanged.emit({value: this.track});
}

Child2

trackChanged(track){
    console.log("YES!! " + track);
}

Communicate between sibling components Angular 2

3 Answers3

Linked