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

Commencez par examiner les composants Material listés : select list, menu, side menu, dialog et datepicker, ainsi que l’exemple de popstate de l’issue concernant le comportement de sidenav. Déterminez l’interaction prévue avec le bouton de retour et le périmètre avant de proposer une implémentation ; une fois terminée, celle-ci doit fermer systématiquement le composant ouvert concerné sans nécessiter de handlers propres à l’application.

Rédigé par le modèle d'indexation à partir du texte de l'issue.