Close Modal in Ionic 4 by Back Button

Markus picture Markus · Oct 21, 2018 · Viewed 14.8k times · Source

I have a Modal in Ionic 4. I'd like to close it, when a user press the back button on her mobile (or the back button in her browser).

Does anyone know how I can do this?

EDIT: More details:

I have a button that opens my modal:

async onClick() {
  const modal = await this.modalController.create({
    component: Foo,
  });
  return await modal.present();
}

Component Foo doesn't have much more content than a button that closes the modal: this.modalController.dismiss();. So far so good.

On my mobile, however, the app now closes when the modal is open and the user taps the mobile's back button. But in this case only the modal should close.

Answer

Markus picture Markus · Oct 22, 2018

Enol's answer helped me find a solution, thanks for that.

platform.registerBackButtonAction does no longer exist in v4. I tried platform.backButton.subscribe instead, but it didn't work. What works is this:

private backbuttonSubscription: Subscription;

constructor(private modalCtrl: ModalController) {

ngOnInit() {
    const event = fromEvent(document, 'backbutton');
    this.backbuttonSubscription = event.subscribe(async () => {
        const modal = await this.modalCtrl.getTop();
        if (modal) {
            modal.dismiss();
        }
    });
}

ngOnDestroy() {
    this.backbuttonSubscription.unsubscribe();
}