Communication between two sibling components in angular 2

[nrmaridu]

I am right now working on angular 2. I found that the communication between the two sibling components or from child to parent is difficult. Even it was not mentioned in the angular 2 documentation. Would you please provide some information about it because the way two sibling components communicate is looking complex than the way a parent component communicates with its child using the 'ViewChild' decorator. But it is not possible to make a parent child relationship between two components always as per the project requirements.

Please find the below scenario of component tree.
A
/
B C
/ \ /
D E F G
Here If I want to communicate between the components 'A' and 'B' then I can use 'ViewChild' decorator because they both are in parent child relationship.
If I want to communicate between the components 'B' and 'G' then How to do it? Because I can't impose parent child relationship between those two.

Would you pleas address the above issue.

[zoechi]

https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

[nrmaridu]

I already read this..But this is not we want. Angular 2 documentation didn't mention properly about siblings communication except the communication thorough event emitting.
I saw in one video that angular 2 team is building production web sites already. I wonder like How come they didn't face this basic issue?

[zoechi]

The documentation goes quite some length about using services to communicate. This is how it's done in Angular2 when the elements are not direct parent-child.

[bastienJS]

@zoechi But this documentation you posted: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

talks explicitly about 'Parent and children communicate via a service' and not sibling to sibling!

Is that link still correct? Ok... concerning that there must be always a root/parent component for those siblings there exist no real sibling communication. Its always a parent/child communication ;-)

[zoechi]

Sibling to sibling is just two children communicating to the same parent (parent is mediator) or like two independent components using a shared service.
You can use a template variable to refer to a component on a sibling element from within the same template.
Perhaps it could be stated in the docs that there is no special support for sibling-to-sibling communication.

[chennamouli]

Implemented by using shared service. Look at the demo
https://embed.plnkr.co/P8xCEwSKgcOg07pwDrlO/

[rpp24]

@chennamouli - I have implemented exactly similar as shown in demo. But in my project, only publisher component receives response from service. i.e. if sibling1 publish data then sibling1 will only get data back and if sibling2 publish data then sibling2 will receive data.
looks like each component is having its own instance of service. what am I missing? please help.

Update: there was provider declaration of shared service in one of the component separately which caused that issue. After removing it, it worked. Thanks for providing demo example.

[ayanb1991]

How can this work on a routed component environment. In the above plunker example the app component template contains the child component selectors, that's why it's working, but in case I am using component router there will be no selectors present at the main AppComponent. Then how will it work?

[rajachennupati]

i've the same situation too what Ayanb1991 is asked.. Please help.

[zoechi]

@ayanb1991 @rajachennupati GitHub issues are for bug reports and feature requests.
For support questions please use other channels like the ones listed in CONTRIBUTING - Got a Question or Problem?

[chennamouli]

There should not be an issue with router. It is working fine in my application with router.

[Jaithra]

i ended up with no luck configuring shared service with router configuration in my app . @chennamouli - could you please help with some demo how this works . thanks in advance .

[zoechi]

@Jaithra
GitHub issues are for bug reports and feature requests.
For support questions please use other channels like the ones listed in CONTRIBUTING - Got a Question or Problem?

[neoswf]

Creating a service for passing a Height of an element, from one sibling to another is such an over kill. NG team needs to offer a solution for that. Accessing simple Dom properties of siblings is a very common task.

[todorpr]

I stumbled upon this issue and could think of this solution. Let's say you've got two sibling components menu and panellisting:

<div>
  <menu [panel]="panel"></menu>
  <panellisting #panel></panellisting>
</div>

Then in menu component make panel to be an @Input():

export class MenuComponent implements OnInit {
    @Input() panel: any;
    ...
}

From this moment on I could access all panel component functions/properties from within menu component via this.panel.

I suppose you can always try to do the vice-versa, not sure if this is correct or has performance impact though.