Close Modal in Ionic 4 by Back Button

Question

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 1

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

Answer 2

You can use the registerBackButtonAction method that Platform service contains. This method allows override the default native action of the hardware back button. The method accepts a callback function as parameter where you can implement your logic. In summary you should do the following:

• Inject the Platform service inside the Foo component.
• Call the registerBackButtonAction in the ngOnInit (or another init method) and pass a function callback as parameter that executes the logic to close the modal (this.modalController.dismiss();)
• Clear the action when the modal component is closed (for example in ngOnDestroy method). To do that, the registerBackButtonAction returns a function that when is called the action is removed.

The code should be something like:

constructor(private platform: Platform) {
    ...
}

ngOnInit() {
    this.unregisterBackAction = this.platform.registerBackButtonAction(() => {
        this.modalController.dismiss();
    })
}

ngOnDestroy() {
    if(this.unregisterBackAction) this.unregisterBackAction();
}