How to close Angular Material Sidenav with escape?

Question

My goal is to close the Angular Material Sidenav by pressing escape.

I have tried using the [autoFocus]="true" property to achieve this, but to no help.

The problem is that pressing escape has no effect - only if I first click inside the sidenav does pressing escape work.

I have forked one of the official examples to demonstrate the issue here, so you can play around with the code.

I am unsure if this is a bug with the sidenav, or just me not being able to figure out how to trap focus.

Answer 1

You can have a work around with a Hostlistener listens esc key. Like this :

@HostListener("document:keyup.esc")
  onkeyup() {
    console.log("close it");
    this.opened = false;
  }

Here is the stackblitz example