mat-sidenav sidenav.toggle() 不工作

Question

I have my toggle button inside the mat-toolbar. The expectation is that I can use the toggle bar to hide and show the sidenav however that is not working. The sidenav is to remain closed until the toggle button is clicked. The toolbar and the sidenav container are in the same component. I also do not have any errors in the console.

nav.component.html

<mat-toolbar ngClass="transparent-nav">
    <div>
        <div class="nav-item-wrapper">
            <a mat-button [routerLink]="'/login'" ngClass="nav-item "> Login</a>
            <a mat-button [routerLink]="'/contact'" ngClass="nav-item nav-pill"> Select a plan </a>
        </div>
        <button mat-icon-button ngClass="btn-toggle-blue">
            <mat-icon (click)="sidenav.toggle()">
                menu
            </mat-icon>
        </button>
    </div>
</mat-toolbar>

<mat-sidenav-container>
    <mat-sidenav #sidenav mode="side"> 
        <div class="nav-item-side-wrapper">
            <a [routerLink]="'/login'" ngClass="nav-item "> Login </a>
            <a [routerLink]="'/contact'" ngClass="nav-item nav-pill-blue"> Select a plan </a>
        </div>
    </mat-sidenav>
    <!-- main content on the page to the right -->
    <mat-sidenav-content>
        <div ngClass="content">
            <router-outlet></router-outlet>
        </div>
    </mat-sidenav-content>
</mat-sidenav-container>

nav.component.ts

 @ViewChild(MatSidenav) sidenav !: MatSidenav;

Answer 1

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatListModule } from '@angular/material/list';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    RouterModule,
    MatButtonModule,
    MatIconModule,
    MatInputModule,
    MatToolbarModule,
    MatSidenavModule,
    MatListModule,
    MatButtonModule,
    MatIconModule,
  ],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

app.component.ts

import { Component, VERSION } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-component',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  title = 'Angular ' + VERSION.major; 

  constructor() {}
}

app.component.html

<mat-toolbar color="primary">
  <mat-toolbar-row>
    <button mat-icon-button>
      <mat-icon (click)="sidenav.toggle()">menu</mat-icon>
    </button>
    <h1>SimpleCRM</h1>
    <span class="menu-spacer"></span>
    <div>
      <a mat-button> Accounts </a>
      <a mat-button> Create Account </a>
      <a mat-button> Contacts </a>
      <a mat-button> Create Contact </a>
      <a mat-button> Activities </a>
      <a mat-button> Create Activity </a>
    </div>
  </mat-toolbar-row>

  <mat-toolbar-row>
    <span style="font-size: 12px;"
      >SimpleCRM helps you easily manage your contacts</span
    >
  </mat-toolbar-row>
</mat-toolbar>

<mat-sidenav-container>
  <mat-sidenav #sidenav>
    <mat-nav-list>
      <a mat-list-item> Accounts </a>
      <a mat-list-item> Create Account </a>
      <a mat-list-item> Contacts </a>
      <a mat-list-item> Create Contact </a>
      <a mat-list-item> Activities </a>
      <a mat-list-item> Create Activity </a>
      <a mat-list-item (click)="sidenav.toggle()" href="" mat-list-item
        >Close</a
      >
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <div style="height: 88vh;">
      <!-- router outlet here -->
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

Working example is here