Angular 2 Sibling Component Communication

How to pass data between sibling components in Angular, by 'sending the message/calling the function' from ngOnInit()?

More than likely this has to do with order of operations. Component A is created and sends the message, then Component B gets created and subscribes to new messages. Since you are using a Subject it only gives you messages sent after you subscribe to it.

The easiest strategy to this is to use a BehaviorSubject.

export class SiblingService {
    sendMessage = new BehaviorSubject();
    constructor() {}

    communicateMessage(msg) {
        this.sendMessage.next(msg);

    }
}

The other way is to send the message after the init happens, like on a click event.

sibling component communication angular 6

When you receive data in parent component you need run a callback function to update sibling1 data. In order to run a callback in parent you can do something like this.

SIBLING2:

class Sibling2 {
   @Output() private onChange: EventEmitter<string> = new EventEmitter<string>();

   ngOnInit () {
     this.onChange.emit("hello parent")
   }

}

PARENT:

    class Parent {
           private parentData: string = null;

           ngOnInit () {
             this.onChange.emit("hello parent")
           }

           onSibling2Change(data) {
             this.parentData = data; //this will update sibling1 data
           }

        }

HTML:

<parentComponent>
  <sibling1 [data]="parentData"></sibling1>
  <sibling2 (onChange)="onSibling2Change($event)"></sibling2>
</parentComponent>

Communication between sibling components in angular

You should use (click) instead of onClick

<li *ngFor="let hero of heroes">
  <span class="badge" (click)="addToEncounter(hero)">{{hero.name}}</span> 
Hitpoints: {{hero.hitPoints}} Armor: {{hero.armor}}
</li>

Communication between sibling components Angular2

appOne doesn't have the popupTwo variable registered as output on it.

Adding it, as <app-one *ngIf="popupOne" [(popupOne)]="popupOne" [popupTwo]="popupTwo"></app-one>, should solve your problem.

How Communication takes between two sibling component in Angular 2 (plus)

Your structure should be like this

parent
  |-- Sibling 1
  |-- Sibling 2

If this is the case, you can use the ViewChild and Host directives.

In the parent :

@ViewChild(ChildOneComponent) one: ChildOneComponent;
@ViewChild(ChildTwoComponent) two: ChildTwoComponent;

In your children :

constructor(@Host() public parent: ParentComponent)

Now in The first child, you can use this :

this.parent.one.methodFromChildOne();

This is one of many examples, probably not the best one (thight coupling, gna gna gna), but it is the easiest one to pull and understand I think.

Angular 2 - communication between two sibling components

Because you are working with Observers and Observables in your service, you don't need to communicate both components because you can directly connect the service with the component template. This should be the code:

Service:

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Subject }    from 'rxjs/Subject';
import 'rxjs/add/operator/map';

@Injectable()
export class AppService {
  private apiURL = "https://www.googleapis.com/youtube/v3/playlistItems?part=snippet,contentDetails,status&maxResults=10&playlistId=PLSi28iDfECJPJYFA4wjlF5KUucFvc0qbQ&key=AIzaSyCuv_16onZRx3qHDStC-FUp__A6si-fStw&pretty=true";

  //Observable string sources
  private thisVideoTitle = new Subject<string>();
  //Observable string streams
  videoTitle$ = this.thisVideoTitle.asObservable();
  constructor(private http:Http) { }

  getData() {
    return this.http.get(this.apiURL)
      .map((res:Response)=> res.json())
      .subscribe(nameTitle => this.thisVideoTitle.next(nameTitle))
  }
}

Then if you want to use this into your component template it should be something like:

<li *ngFor="let title of videoTitle$ | async"></li>

Communicate between sibling components Angular 2

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);
  }

}