Universally close Angular Material's MatDialog modals with back button

I’m trying to close open dialog boxes (created with MatDialog) using the Android hardware back button.

There are several MatDialog boxes created on different pages and I’m trying to clear them with the back button, without navigating the app, just like how the device naturally handles JS alert() popups.

app.component.ts

backHandler() {
    const event = fromEvent(document, 'backbutton');

    event.subscribe(async () => {
      if (this.dialog.openDialogs.length > 0) {
        // If dialogs are open, close the top one
        this.dialog.openDialogs[this.dialog.openDialogs.length - 1].close();
      }
      else {
        this.routeState.popFromHistory();
        this.navCtrl.back();
      }
    });
  }

This code is successfully intercepting the back button, and openDialogs returns a list of any open modals.
When I run .close() on the last item in the array, it doesn’t return any errors, but the modal stays open. If I change my phone’s orientation, or exit and re-enter the app (i.e. force the app to redraw) THEN it closes the modal and triggers its ngOnDestroy() function.

The same thing happens if I just run this.dialog.openDialogs.closeAll().

I’m not sure what package versions or other code would be helpful to provide, but I can give whatever’s necessary.

4 posts - 2 participants

Read full topic