title: Angular 2 Side-bar to be closed whenever a route is changed
body: <p>I have a sidebar wich you can close when clicking outside or on X inside in bar. But I need to have auto close when changes routes ( for example from Home to About or Contacts stays open, but I need that It collapsed )</p>
  
  <pre><code>&lt;md-toolbar class='toolbar' color="primary" &gt;
  
    &lt;button md-icon-button (click)="nav.open()"&gt;
      &lt;md-icon class="md-24"&gt;menu&lt;/md-icon&gt;
    &lt;/button&gt;
  
  
  &lt;/md-toolbar&gt;
  
  &lt;md-sidenav-container&gt;
  
    &lt;md-sidenav #nav&gt;
          &lt;md-nav-list&gt;
    &lt;button md-icon-button (click)="nav.close()"&gt;
      &lt;md-icon class="md-24"&gt;close&lt;/md-icon&gt;
    &lt;/button&gt;
        &lt;a md-list-item routerLink='home'class="active"&gt; Home &lt;/a&gt;
  
        &lt;a md-list-item routerLink='about' class= "page-scroll" &gt; About us&lt;/a&gt; 
      &lt;a md-list-item routerLink='discount' class= "page-scroll" &gt;Discounts &lt;/a&gt;
      &lt;a md-list-item routerLink='contact'class= "page-scroll" &gt;Contact &lt;/a&gt;
         &lt;a md-list-item routerLink='order' class= "page-scroll" &gt;Order&lt;/a&gt;...
  
  
      .md-toolbar {
  padding-top: 1em;
  align-self: flex-start;
  height:5em;
  
  
  }
  
  
  .toolbar{
  
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 50px;
  
  
  }
  
  
  md-nav-list{
       margin-left: 20px;
    margin-right: 10px;
      margin-top: 80px;
        font-size: 1.2em;
        font-family: Raleway;
  }
  
  
  
  @media screen and (max-width: 600px) {
    .logo {
  
  display: none  }
    .search{
  
    }
  }
  
  
  html {
    height: 100%;
  }
  body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
  }
  
  .container{
      margin-top: 100px;
          margin-bottom: 100px;
    flex: 1 0 auto;
  
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/CnmpY.png" rel="nofollow noreferrer">When I choose another tab the background is still black and sidebar is opened, don't collapse</a></p>
  
  <p>I find something that looks like what I need possible but it's for AngularJs. How can I use it for Angular 2 by pkozlowski.opensource</p>
  
  <blockquote>
    <p>If you want all the opened modals to be closed whenever a route is >changed successfully, you could do it in one central place by listening >to the $routeChangeSuccess event, for example in a run block of your app:</p>
  </blockquote>
  
  <pre><code>var myApp = angular.module('app', []).run(function($rootScope, $uibModalStack) {
    $uibModalStack.dismissAll();
  }); 
  </code></pre>