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?

Answer 1

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>