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:

/*Begin_c8o_function:CTS1683726422831*/ page.c8o.log.debug('[MB] '+ props.actionFunction +': '+ props.actionName); if(window.history.state.modal){ history.back(); } resolve(); /*End_c8o_function:CTS1683726422831*/

See it in action with a real Android device:

 

(c) Convertigo 2023 https://www.convertigo.com