Angular 8: send event from one component to sibling component

Question

I have a sidebar component and a page component.

The sidebar component has a @ViewChild which is an ngbAccordion from Angular Boostrap. I want to trigger its collapseAll method from the page component.

So the sidebar has

  @ViewChild('webAccordion', { static: false })
  webAccordion: NgbAccordion;
  @ViewChild('pageAccordion', { static: false })
  pageAccordion: NgbAccordion;


  collapseAllAccordions() {
    this.webAccordion.collapseAll();
    this.pageAccordion.collapseAll();
  }

When the "page" component loads, I want to emit an event to the "sidebar" component that triggers my collapseAllAccordions function.

I know how to do this with parent/child components, and most of the stuff I can find with Google and here on SO discusses parent/child situations. Except in my case they are sibling components. I'm not sure how to hand siblings.

Answer 1

You can use a service:

• Inject a service into two sibling components.
• Add an emitter or an Observable to the service.
• Add a function in the service to change the value of the Observable / emit a new value if your using an emitter.
• Use the function in your "page" component.
• Subscribe to the emitter or the Observable in your "sidebar" component and trigger collapseAllAccordions.