Angular Material: Open mat-sidenav from mat-dialog or @component

Question

I've been searching for quite a while for a solution for this so any help would be great.

I'm using Angular Material 2 and I want to use the .open() method for a mat-sidenav by pressing a button in a mat-dialog or just when the dialog closes.

According to the documentation I think I can tag the mat-sidenav element with #sidenav (or something) and then put (click)="sidenav.open()" in the button element. However, it isn't working (I read it might have something to do with different z-planes?).

It looks something like this:

sidenav.html

<mat-sidenav-container>
  <mat-sidenav #sidenav opened="false"> ... </mat-sidenav>
</mat-sidenav-container>

<button mat-button (click)="openDialog"></button>

dialog.html

<button mat-button (click)="sidenav.open()">Open Sidenav</button>

The dialog opens and closes fine and so does the sidenav (via a different button).

I'm sure there's a way to open a sidenav from the @component but I haven't figured out how after trying several methods.

Thanks

Edit: I should have said that I'm pretty new to Angular 2+ so if you could include a code snippet with an answer I'd appreciate it.

Answer 1

In case you still haven't found an answer. Here is what I think might work.

Like @PankajParkar mentioned you can pass the sidenav variable into the dialog when you open the dialog.

let dialogRef = this.dialog.open(MyDialogComponent, {
    data: {
        sidenav: this.sidenav
    }
})

Then from inside the dialog you can call this.data.sidenav.open(). Since I haven't tried this I'm not sure where the sidenav will end up. It could be displayed below the dialog, but if the dialog closes immediately then I guess it wouldn't be a problem.