Hardware back button support on Mobile for Material Components

#### Feature Description

Global digital report suggests that the ways in which people use the internet are evolving quickly, with mobile accounting for an ever-increasing share of our online activities. and it’s worth noting that mobile phones now account for almost half the time that people spend on the internet.

Angular Material components are already well optimized for the mobile devices, but I believe one thing is missing.

On mobile devices the native controls handles hardware back button nicely. It's very common for users to use back button to close an opened select list, close a dialog or datepicker, opened menu, or opened side menu etc on mobile, but this functionality is missing in Angular Material components.

Chrome now supports installable PWAs and Trusted Web Activities (TWA) takes PWAs to Play store.

Soon people would want to use single codebase for desktop, mobile and installable apps. And support for native gestures including back button integration would become necessity.

It would be really nice to have support for hardware back button on mobile in at least below material components:

1. Select list
2. Menu
3. Side Menu
4. Dialog
5. Datepicker

For side menu I tried handling the back button using below approach, but I believe there certainly would be a better way to handle this, and nothing matches if this support is directly added in material components:

**In template:**

```

Page 1

```
**In component:**
```
import { Location } from "@angular/common";

//called when a menu item/link is clicked
navigate(url: string) {
this.sidenav.close();
this.location.replaceState(url);
this.router.navigateByUrl(url);
}

//called when the menu opens or close
onOpenedChange(isOpened: boolean) {
this.zone.runOutsideAngular(() => {
if (isOpened) {
window.addEventListener('popstate', this.onHardwareBackButton, { passive: true });
this.location.go('side-nav');
}
else {
window.removeEventListener('popstate', this.onHardwareBackButton);
}
});
}
//called when back button is pressed
private onHardwareBackButton = () => {
this.sidenav.close();
window.removeEventListener('popstate', this.onHardwareBackButton);
};
```

Comienza revisando los componentes de Material indicados: select list, menu, side menu, dialog y datepicker, junto con el ejemplo de popstate del issue para el comportamiento de sidenav. Determina la interacción prevista con el botón de retroceso y el alcance antes de proponer una implementación; la implementación terminada debe cerrar de forma coherente el componente abierto correspondiente sin requerir handlers específicos de la aplicación.

Escrito por el modelo de indexación a partir del texto del issue.