ionic 4 deal with modal when users click phone back button

Question

What should happen when users click over back button of phone? In case when modal opens.

Registered a back button:

// To prevent interference with ionic's own backbutton handling
// you can subscribe with a low priority instead
this.platform.backButton.subscribe(() => {
  // code that is executed when the user pressed the back button
  // and ionic doesn't already know what to do (close modals etc...)
  self.modalController.dismiss();
});

The problem with the code:

It closes/dismiss modal is fine!
But it also pushed back the page from where the modal is opened. Means it pop the page behind modal.

This should not happen the page should not pop - only modal should close.

Check the image gif added -> Click here to see the problem

francisco neto francisco neto · Accepted Answer · 2020-09-14T12:58:13

You may consider using platform.backButton.subscribeWithPriority() with a high priority (ex: 9999).

Then checking if there is a opened modal with modalController.getTop().

constructor(private modalCtrl: ModalController, private nav: NavController) { 
}

ngOnInit() {
  this.platform.backButton.subscribeWithPriority(9999, () => {
    this.closeModalOrPage();
  });
}

async closeModalOrPage(){
  let modal = await this.modalCtrl.getTop();
  if (modal){
    modal.dismiss();
  } else {
    this.nav.pop();
  }
}

ionic 4 deal with modal when users click phone back button

1 Answers