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);
};
```

Inizia esaminando i componenti Material elencati: select list, menu, side menu, dialog e datepicker, insieme all’esempio di popstate dell’issue per il comportamento di sidenav. Determina l’interazione prevista con il pulsante Indietro e l’ambito prima di proporre un’implementazione; una volta completata, l’implementazione deve chiudere in modo coerente il componente aperto pertinente senza richiedere handler specifici dell’applicazione.

Scritto dal modello di indicizzazione a partire dal testo della issue.