Angular 5 Material mat-sidenav toggle not working

Question

I'm trying to get the sidenav to work using the official open/close example.

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.

After some trial and error I've figured out that mat-sidenav-content is not the content of the sidenav, but the page/site content.

To experiment and get something working, I've done it this way for now, in my app.component.html (will likely later move into a directive/component once I figure that out):

<mat-sidenav-container class="all-wrap" fullscreen>
  <mat-sidenav #sidenav mode="side" opened>
  yo
  </mat-sidenav>


<mat-sidenav-content>

<app-top-nav></app-top-nav>
<router-outlet></router-outlet>
     
<app-footer-nav></app-footer-nav>
    </mat-sidenav-content></mat-sidenav-container>

The example uses [(opened)]="opened" on mat-sidenav. This just leaves the nav closed for me, where simply using open leaves it open. Either way the toggle is broken. The toggle is here, in topnav.html:

<div class="pageFullNav">
  <nav class="docs-navbar">
      
        <a mat-button (click)="sidenav.toggle()"><i class="material-icons">menu</i></a>   

... etc />

Console is failing on the toggle.

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)

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.

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 { }

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!

Answer 1

Solved by p4r1 above. Thanks again.

Solution was moving the toggle control into the same file as side-nav.

<mat-sidenav-container class="all-wrap" fullscreen>
  <mat-sidenav #sidenav mode="side" opened>
  <h3>navigate</h3>
  </mat-sidenav>


<mat-sidenav-content>
    <a mat-button (click)="sidenav.toggle()"><i class="material-icons">menu</i></a>