CODEWITHSUNDEEP
angularangular-material
DauleDK
DauleDK

Reputation: 3433

How to close Angular Material Sidenav with escape?

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.

Upvotes: 6

Views: 1954

Answers (2)

Beto Shiver
Beto Shiver

Reputation: 49

you can add a fnction like this

 <mat-drawer-container (keydown.escape)="drawer.closed = true"...

<mat-drawer #drawer mode="side" ...

this way it should close regardless of where your focus is

Upvotes: 0

Eldar
Eldar

Reputation: 10790

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

Upvotes: 4

Related Questions