Convertigo Public Knowledge base
Closing a modal with Android back button
In a Convertigo PWA application, what comes first to close a modal page? In Android, it is likely to be the hardware back button! How do you manage it so it does not go back in the pages history?
Here after a 8.2 sample project to import in your Studio, to see how it works: modal_back
It is based on the following article: https://dev.to/nicolus/closing-a-modal-with-the-back-button-in-ionic-5-angular-9-50pk
In the ‘Edit page class’ of the page that contains the Modal component, change like:
/*Begin_c8o_PageImport*/
import { HostListener } from '@angular/core';
/*End_c8o_PageImport*/
/*Begin_c8o_PageDeclaration*/
@HostListener('window:popstate', ['$event'])
dismissModal() {
this.c8o.log.warn('DISMISS MODAL!!!');
let modalController = this.getInstance(ModalController);
modalController.dismiss();
}
/*End_c8o_PageDeclaration*/
In the Modal component add 2 events : willPresent and willDismiss:
Â
Edit ‘init’ customAction component :
/*Begin_c8o_function:CTS1683726261570*/
page.c8o.log.debug('[MB] '+ props.actionFunction +': '+ props.actionName);
page.global.modalState = {
modal: true,
desc: "fake state for ou modal"
};
history.pushState(page.global.modalState, null);
resolve();
/*End_c8o_function:CTS1683726261570*/
And 'destroy' customAction component:
See it in action with a real Android device:
Â
(c) Convertigo 2023 https://www.convertigo.com