Angular Материал мата-выдвижного ящика-фона не скроется после выбора предмета из мата-сидена

Question

У меня есть сворачивающееся меню гамбургера, после выбора любой ссылки меню сворачивается обратно, и routerLink изменяется на выбранный компонент, но фон ящика циновки остается, пока я не щелкну где-нибудь на экране.

приложение. компонент. html

<mat-sidenav-container>
  <mat-sidenav #sidenav role="navigation">
    <app-sidenav-list (sidenavClose)="sidenav.close()"></app-sidenav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <app-header (sidenavToggle)="sidenav.toggle()"></app-header>
    <main>
      <router-outlet></router-outlet>
    </main>
  </mat-sidenav-content>
</mat-sidenav-container>

sidenav-list.component. html

<mat-nav-list>
  <a mat-list-item routerLink="/signup" (click)="onSidenavClose()">
    <mat-icon>create</mat-icon>
    <span class="nav-caption">Sign Up</span>
  </a>
  <a mat-list-item routerLink="/login" (click)="onSidenavClose()">
    <mat-icon>input</mat-icon>
    <span class="nav-caption">Log In</span>
  </a>
</mat-nav-list>

sidenav-list.component.ts

import { Component, OnInit, Output, EventEmitter } from "@angular/core";

@Component({
  selector: "app-sidenav-list",
  templateUrl: "./sidenav-list.component.html",
  styleUrls: ["./sidenav-list.component.scss"],
})
export class SidenavListComponent implements OnInit {
  @Output() sidenavClose = new EventEmitter<void>();

  constructor() {}

  ngOnInit(): void {}

  onSidenavClose() {
    this.sidenavClose.emit();
  }
}