Ionic v4.0.0-beta.8 released - Back button is back

Ionic Framework
1

Have you seen the news, Ionic v4.0.0-beta.8 has been released and it seems, according the CHANGELOG, that the back button feature is now implemented :tada::tada::tada:

UPDATE: For me I was able to close modals with the hardware back button but I was “still” not able to navigate back, I opened an issue https://github.com/ionic-team/ionic/issues/15492

1 Like
2

Example for ionic v4.1.2:


export class AppComponent {

    // set up hardware back button event.
    lastTimeBackPress = 0;
    timePeriodToExit = 2000;

    @ViewChildren(IonRouterOutlet) routerOutlets: QueryList<IonRouterOutlet>;

    constructor(
        private platform: Platform,
        private splashScreen: SplashScreen,
        private statusBar: StatusBar,
        public modalCtrl: ModalController,
        private actionSheetCtrl: ActionSheetController,
        private popoverCtrl: PopoverController,
        private router: Router,
        private toast: Toast) {
        this.initializeApp();
        // Initialize BackButton Eevent.
        this.backButtonEvent();
    }


// active hardware back button
    backButtonEvent() {

        // subscription to native back button
        this.platform.backButton.subscribe(async (data) => {
            alert(data);

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

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

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


            this.routerOutlets.forEach((outlet: IonRouterOutlet) => {
                if (outlet && outlet.canGoBack()) {
                    outlet.pop();
                } else if (this.router.url === '/home') {
                    // Double check to exit app
                    if (new Date().getTime() - this.lastTimeBackPress < this.timePeriodToExit) {
                        this.platform.exitApp(); // Exit from app

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

work fine, but doesn’t work Platform Exit, like: platform.exitApp(); func.