Dismiss alert box on back button press (Android)

Ionic Framework ionic-v3
1

Hello! I’m facing this, on pressing back button page get navigate to the previous page and alert box still there, Please suggest me how I can to close the alert box on pressing the back button for android.

2

You can specify your desired action in navigation back button. Dismiss alert over there. If you don’t know how to write your desired code for that, let me know

3

@umerf6455
I am also facing this problem
so basically we need to handle hardware back button?

4

Bro there is a difference between hardware and the navbar back button. But you can implement back button actions for both separately. Let me know which code do you need

5

thanks man for reply
i know that , i want to dismiss model or select box when i click on back button (mobile hardware).
if you have code/ reference link please provide me.
i am using this

6

oki. Try this in your .ts files:

import { Platform } from 'ionic-angular'; //import platform

this.platform.registerBackButtonAction(() => {
   //your desired action here
});

Hope this will help you

7

Ionic 4 Hardware back button example here include Alert Dismiss:

// active hardware back button
    backButtonEvent() {
        this.platform.backButton.subscribe(async () => {

            console.log(this.router.url);

            // close alert
            try {
                const element = await this.alert.getTop();
                if (element) {
                    element.dismiss();
                    return;
                }
            } catch (error) {
            }

            // close action sheet
            try {
                const element = await this.actionSheetCtrl.getTop();
                if (element) {
                    element.dismiss();
                    return;
                }
            } catch (error) {
            }

            // close popover
            try {
                const element = await this.popoverCtrl.getTop();
                if (element) {
                    element.dismiss();
                    return;
                }
            } catch (error) {
            }

            // close modal
            try {
                const element = await this.modalCtrl.getTop();
                if (element) {
                    element.dismiss();
                    return;
                }
            } catch (error) {
                console.log(error);

            }

            // close side menua
            try {
                const element = await this.menu.getOpen();
                if (element !== null) {
                    this.menu.close();
                    return;

                }

            } catch (error) {

            }

            this.routerOutlets.forEach((outlet: IonRouterOutlet) => {
                if (outlet && outlet.canGoBack()) {
                    outlet.pop();

                } else if ((this.router.url === '/tabs/(cat_bd:cat_bd)')
                    || (this.router.url === '/tabs/(cat_en:cat_en)')
                    || (this.router.url === '/tabs/(cat_hi:cat_hi)')) {
                    if (new Date().getTime() - this.lastTimeBackPress < this.timePeriodToExit) {
                        // this.platform.exitApp(); // Exit from app
                        navigator['app'].exitApp(); // work in ionic 4

                    } else {
                        this.toast.show(
                            `Press back again to exit App.`,
                            '2000',
                            'center')
                            .subscribe(toast => {
                                // console.log(JSON.stringify(toast));
                            });
                        this.lastTimeBackPress = new Date().getTime();
                    }
                }
            });
        });
    }
2 Likes
8

I need code for hardware back button for hiding the alert, please help me bro

9

Use the code I’ve posted above in post 6. You can dismiss your alert there. Let me know if that doesn’t work.

10

Thank for the reply.
Yes, It is working. But in my case, I created the service for alert (eg. message-service.ts) and use this service all over the project. Actually, I want a active alert box get dismiss first instead of page navigate on back button.

11

Is this code working in ionic 3?

12

no its working for ionic 4 beta.

13

I know its an old post but for someone struggling with this can do this.

this.platform.registerBackButtonAction(function (event) {
let activeModal = that.ionicApp._modalPortal.getActive();
let activeAlert = that.ionicApp._overlayPortal.getActive();
if (activeModal) {
activeModal.dismiss();
return;
}
if (activeAlert) {
activeAlert.dismiss();
return;
}
}, 401);