How to hide the Angular Material Sidenav when a user clicks a link


I am developing an Angular app that uses Material UI, I used the Angular CLI to generate the following code:

Navigation HTML

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" fixedInViewport [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="(isHandset$ | async) === false">
      <mat-icon>keyboard_arrow_down</mat-icon> Select
      <a mat-list-item [routerLink]="['home']">
        <mat-icon>location_on</mat-icon> - Home
    <mat-toolbar color="primary">
      <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()"
        *ngIf="isHandset$ | async">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
    <!-- Add Content Here -->

Navigation TypeScript

import { Component } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Observable } from 'rxjs';
import { map, shareReplay } from 'rxjs/operators';

  selector: 'app-navigation',
  templateUrl: './navigation.component.html',
  styleUrls: ['./navigation.component.scss']
export class NavigationComponent {

  isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
      map(result => result.matches),

  constructor(private breakpointObserver: BreakpointObserver) {}


My problem is that I want the navbar to close (disappear) when the user clicks on a link.
How do I do that?

When the user clicks a link, the navbar stays enabled. I have to tap somewhere at the background to make it vanish.


you already have a template reference #drawer of the sidenav component so you can call toggle method like this

 <mat-nav-list (click)="drawer.toggle()">
      <a mat-list-item [routerLink]="['home']">
        <mat-icon>location_on</mat-icon> - Home

in case we want to toggle the sidebar base of small screen (mobile)


  toggle(nav: MatSidenav) {
    const isSmallScreen = this.breakpointObserver.isMatched(
      "(max-width: 599px)"
    if (isSmallScreen) {


 <mat-nav-list (click)="toggle(drawer)">
      <a mat-list-item [routerLink]="['home']">
        <mat-icon>location_on</mat-icon> - Home

demo 🚀

Answered By – Muhammed Albarmavi

Answer Checked By – Candace Johnson (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.