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

8
votes

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?

2
angulartypescript

2 Answers

18
votes

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>
4
votes

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