Angular 2 material: sidenav toggle from another component

12
votes

I'm using Angular 2 Material sidenav in my project this way:

app.component.ts (Main) html view:

<md-sidenav-layout>
  <md-sidenav #start mode="side" [opened]="true">
      This is the main sidenav
      <sidebar></sidebar>
  </md-sidenav>

  <md-sidenav #end align="end">
    This sidenav suppose to open from different components across my application to show extra information/data when user clicks an image for example.
    <br>
    <button md-button (click)="end.close()">Close</button>
  </md-sidenav>

<router-outlet></router-outlet>

</md-sidenav-layout>

Now.. in order to open the #end sidenav I use the following button in the same component:

<button md-button (click)="end.open()">Open End Side</button>

But, what if I want to use end.open() from a different component to toggle the sidenav? How I am supposed to make the sidenav "gloal" so I can open it on any component in my app?

2
angularangular-material
This should be using the angular-material2 tag and not angular-material tag. - Splaktar

2 Answers

12
votes

Usually a shared service is used for this.

Provide the service at a common ancestor. The component that controls the open status injects the service and the components that want to request the controlling component to change the status also inject the service.

When some component wants the sidenav to toggle, they send an event using the shared service. The component controlling the toggle listens for events and toggles on request.

For more details see https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

3
votes

Use @ViewChild from your parent component, and pass it to component who you'd like to access sidenav methods (open, close toggle) from.

ref: https://yakovfain.com/2016/04/19/angular-2-exposing-child-components-api/

export class ParentComponent {
  @ViewChild('start') start:MdSidenav;
}