Angular 2 - How do you call a function in a sibling component?

Question

I have 2 sibling components that need to communicate:

<app-controls></app-controls> <app-main></app-main>

app-controls contains buttons that need to trigger events in the app-main component. Is there a Angular 2 style guide compliant way of doing so?

score 28 · Accepted Answer · answered Aug 17 '16 at 20:14

28

You can use a template variable to get a reference to the sibling. If <app-controls> has an output where it emits events when a button is clicked you can do:

<app-controls (buttonClicked)="main.doSomething($event)"></app-controls>
<app-main #main></app-main>

or you can pass a reference to a @Input() siblings; and then call methods on it:

<app-controls [sibling]="main"></app-controls>
<app-main #main></app-main>

answered Aug 17 '16 at 20:14

Günter Zöchbauer

623,577
216
2,003
1,567

2

I was about to post an answer mentioning the output + local template variable technique, but you beat me :). Here's the [plunker](http://plnkr.co/edit/RfqrMs7Rn3S9ZeYLvY83?p=preview). – Mark Rajcok Aug 17 '16 at 20:20
Thanks for the Plunker :) – Günter Zöchbauer Aug 17 '16 at 20:22
@GünterZöchbauer how can i access the form inside the please note for this #main im loading a dynamic component – LittleDragon Mar 03 '17 at 05:55
@LittleDragon Please create a new question with your code that demonstrates what you try to accomplish. – Günter Zöchbauer Mar 03 '17 at 06:43
@GünterZöchbauer add a new question :) http://stackoverflow.com/questions/42573260/angular-2-collect-data-from-a-sibling-component – LittleDragon Mar 03 '17 at 07:41
@GünterZöchbauer Thanks for the solution – Ajay Patel Apr 18 '17 at 08:58
@MarkRajcok That plunker help me the easy way – Ajay Patel Apr 18 '17 at 08:58
@GünterZöchbauer It will give error when you build for prod :) – Fooker Mar 02 '20 at 07:26
@Fooker quite pointless comment without the actual error message :) – Günter Zöchbauer Mar 02 '20 at 10:12
this approach shows main undefined for me so I had to use event emitter in the service and subscribe in the component to trigger event – Khuram Niaz Jul 09 '20 at 23:29
Looks like you can also create a ViewChild reference to component A and then assign it to a public variable in component B from the parent component which can then be referenced from within component B. I had to do that to avoid the ExpressionChangedAfterItHasBeenCheckedError as I had an *ngIf on component A. – Doug May 04 '21 at 15:09

score 4 · Answer 2 · answered Aug 17 '16 at 19:32

4

Two ways:

Use a shared Service with dependency injection.

Or using the @Input() und @Output() decorators:

https://angular.io/docs/ts/latest/cookbook/component-communication.html

answered Aug 17 '16 at 19:32

slaesh

16,659
6
50
52

Angular 2 - How do you call a function in a sibling component?

2 Answers2

Linked