title: Opening mat-sidenav from a button outside of mat-sidenav-container
body: <p>I try to do the same thing for a mobile usage that Angular Material teams have done on <a href="https://stackblitz.com/angular/lnbbvjveyex?file=app%2Fsidenav-responsive-example.html" rel="nofollow noreferrer">this example</a>. </p>
  
  <p>So I created my component, like this : </p>
  
  <pre><code>&lt;app-component-0&gt;&lt;/app-component-0&gt;
  &lt;div class="d-lg-none"&gt;
      &lt;button mat-icon-button (click)="snav.toggle()"&gt;
           &lt;mat-icon&gt;menu&lt;/mat-icon&gt;
      &lt;/button&gt;
      &lt;mat-sidenav-container class="sidenav-container"&gt;
          &lt;mat-sidenav #snav mode="over"&gt;
             &lt;app-menu-tree&gt;
             &lt;/app-menu-tree&gt;
          &lt;/mat-sidenav&gt;
          &lt;mat-sidenav-content&gt;
             &lt;router-outlet&gt;&lt;/router-outlet&gt;
          &lt;/mat-sidenav-content&gt;
     &lt;/mat-sidenav-container&gt;
  &lt;/div&gt;
  &lt;app-component-1-desktop class="d-none d-lg-flex flex-column"&gt;&lt;/app-component-1-desktop&gt;
  </code></pre>
  
  <p>So the button who call the toggle action of the sidenav is outside of the mat-sidenav-container, exactly like in the example on stackblitz...
  But I have the following error when I click on the button:</p>
  
  <blockquote>
    <p>Cannot read property 'toggle' of undefined</p>
  </blockquote>
  
  <p>And so the button can't open the sidenav...</p>
  
  <p>Does anyone have an idea to fix this ? </p>
  
  <p>(Sorry for my english, it is not my native language)</p>