Close angular material sidenav on any button click inside

Question

I have an Angular 4 Material Sidenav on my application, and it has a bunch of buttons in it, some of which call functions, and others route to other pages.

Outside of having every button call the same function which then looks up what function to call (like with a switch on a param sent in), is there a built-in way to have the sidenav close on child click?

Here's what the sidenav looks like:

<md-sidenav #sidenav align="end">
    <br/>
    <span style="margin: 17px">{{auth?.userProfile?.name}}</span> <br />
    <button md-button routerLink="/spells"> All Spells </button> <br />
    <button md-button (click)="login()" *ngIf="!auth.authenticated()">Log In</button>
    <button md-button routerLink="/spellbook" *ngIf="auth.authenticated()"> My Spellbooks </button> <br />
    <button md-button (click)="auth.logout()" *ngIf="auth.authenticated()">Log Out</button>
</md-sidenav>

Answer 1

I saw this question and I found that there is a default event that is tied to the sidenav that you can use. if you put (click)="sidenav.toggle()" on anything inside the sidenav (or the sidenav itself) it should close. Here is my code:

<mat-sidenav-container class="container">
  <mat-sidenav #sidenav (click)="sidenav.toggle()">
    <p class="menu-item">
      <a routerLink="">
        <button mat-button><mat-icon>dashboard</mat-icon><span> Dashboard</span></button>
      </a>
    </p>
    <p class="menu-item">
      <a routerLink="account">
        <button mat-button><mat-icon>account_circle</mat-icon><span> My Account</span></button>
      </a>
    </p>
    <p class="menu-item">
      <button mat-button><mat-icon>clear</mat-icon><span> Log Out</span></button>
    </p>
  </mat-sidenav>

  <mat-sidenav-content>
    <div id="menu-bar">
      <button mat-button (click)="sidenav.open()" id="menu-button"><mat-icon style="color: #fff;">menu</mat-icon></button>
      <span id="app-title">App Name</span>
    </div>

    <div class="internal-container">
        <router-outlet></router-outlet>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>