title: How can I close Material SideNav by clicking on an element which has the RouterLink directive?
body: <p>I am using <a href="https://angular.io" rel="noreferrer">angular 4</a> in combination with <a href="https://material.angular.io" rel="noreferrer">angular material</a>. </p>
  
  <p>I am using a sidenav container a router and a custom generated menu:</p>
  
  <pre><code>&lt;mat-sidenav-container&gt;
  &lt;mat-sidenav #sidenav&gt;
      &lt;app-menu&gt;&lt;/app-menu&gt;
  &lt;/mat-sidenav&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;/mat-sidenav-container&gt;
  </code></pre>
  
  <p>Inside the menu component I am using default angular 4 router links:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li *ngFor="let hero of heroes"&gt;
      &lt;a mat-button [routerLink]="['/hero/', hero.id]" queryParamsHandling="merge"&gt;
        {{hero.name}}
      &lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>What I would like to do is to close the <code>Material sidenav</code> when clicking on one of those router links.</p>
  
  <p>I can assure you that without the click event routing works fine, it just does not close my sidenav, because the router-outlet is inside the side navigation.</p>
  
  <p>However, when I add a <code>(click)="sidenav.close()"</code> to the <code>a</code> my full page suddenly refreshed, instead of just following the router link.</p>
  
  <p>I have tried many things, but I can't seem to figure it out, hope someone can help!</p>