title: Angular 5 Material mat-sidenav toggle not working
body: <p>I'm trying to get the sidenav to work using the official <a href="https://material.angular.io/components/sidenav/overview#opening-and-closing-a-sidenav" rel="nofollow noreferrer">open/close example</a>. </p>
  
  <p>I'm new to Angular, so I'm not sure how everything is supposed to work, but for other components so far I've been good just grabbing the HTML portion of the examples and modifying CSS. </p>
  
  <p>After some trial and error I've figured out that <strong>mat-sidenav-content</strong> is not the content of the sidenav, but the page/site content. </p>
  
  <p>To experiment and get something working, I've done it this way for now, in my <strong>app.component.html</strong> (will likely later move into a directive/component once I figure that out):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;mat-sidenav-container class="all-wrap" fullscreen&gt;
    &lt;mat-sidenav #sidenav mode="side" opened&gt;
    yo
    &lt;/mat-sidenav&gt;
  
  
  &lt;mat-sidenav-content&gt;
  
  &lt;app-top-nav&gt;&lt;/app-top-nav&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
       
  &lt;app-footer-nav&gt;&lt;/app-footer-nav&gt;
      &lt;/mat-sidenav-content&gt;&lt;/mat-sidenav-container&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The example uses <strong>[(opened)]="opened"</strong> on <strong>mat-sidenav</strong>. This just leaves the nav closed for me, where simply using <strong>open</strong> leaves it open. Either way the toggle is broken. The toggle is here, in <strong>topnav.html</strong>:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="pageFullNav"&gt;
    &lt;nav class="docs-navbar"&gt;
        
          &lt;a mat-button (click)="sidenav.toggle()"&gt;&lt;i class="material-icons"&gt;menu&lt;/i&gt;&lt;/a&gt;   
  
  ... etc /&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Console is failing on the toggle. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>TopNavComponent.html:5 ERROR TypeError: Cannot read property 'toggle' of undefined
      at Object.eval [as handleEvent] (TopNavComponent.html:5)
      at handleEvent (core.js:13589)
      at callWithDebugContext (core.js:15098)
      at Object.debugHandleEvent [as handleEvent] (core.js:14685)
      at dispatchEvent (core.js:10004)
      at eval (core.js:10629)
      at HTMLAnchorElement.eval (platform-browser.js:2628)
      at ZoneDelegate.invokeTask (zone.js:421)
      at Object.onInvokeTask (core.js:4751)
      at ZoneDelegate.invokeTask (zone.js:420)</code></pre>
  </div>
  </div>
  </p>
  
  <p>I believe this may have something to do with missing Material modules, but as far as I can tell I have all the relevant ones. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import { NgModule } from '@angular/core';
  import {MatButtonModule, MatCheckboxModule, MatInputModule, MatMenuModule, MatSidenavModule, MatButtonToggleModule, MatExpansionModule, MatRippleModule} from '@angular/material';
  
  // add only required modules
  
  
  @NgModule({
    imports: [MatButtonModule, MatCheckboxModule, MatInputModule, MatMenuModule, MatSidenavModule, MatButtonToggleModule, MatExpansionModule, MatRippleModule],
    exports: [MatButtonModule, MatCheckboxModule, MatInputModule, MatMenuModule, MatSidenavModule, MatButtonToggleModule, MatExpansionModule, MatRippleModule]
  })
  export class CustomMaterialModule { }</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'd appreciate if any help were very explicit about which files/sections to modify, because this environment is relatively new to me. Thank you!</p>