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

まず、一覧にある Material コンポーネント（select list、menu、side menu、dialog、datepicker）と、sidenav の動作に関する issue の popstate の例を確認してください。実装を提案する前に、戻るボタンの意図された操作と対象範囲を判断してください。実装が完了したら、アプリケーション固有のハンドラーを必要とせず、該当する開いているコンポーネントを一貫して閉じられるようにする必要があります。

索引モデルが issue の本文から書いたものです。