Register Back Button In Ionic 2 & 3

In the phone, the hardware Back Button will redirect to the previous page, but the user needs to redirect the other or alternate page. In some app, clicking the back button it will close the app. The mechanism of the app is to push all the future or forward page and clicking the back button it's pop all the previous page. When the back array is fully popup, then the app will close. The app must intimate the app closing, intimation must be alert(click twice a back button to close the app). If we redirect to back page, first all check the current page if there any controller or popup menu is open, It does not redirect without the closing all controller and popup menus.

How to use the register back button in app

Import

Import all controller, menu, navbar, and platform to app.component.ts. use platform to control to android platform.

Platform

Platform get all information about the users, the platform gives all data from mobile and tablets. Import platform in app.component.ts and control it.

import { Component, ViewChild } from '@angular/core';
import { Platform,Nav,AlertController } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
     import { ModalController } from 'ionic-angular';
     import { MenuController } from 'ionic-angular';
     import { IonicApp} from 'ionic-angular';

Nav

Nav is variable for the component of navController. It will redirects from open page to another. Then if the normal push is used to redirect the page and it has back page to pop the pages, If the Nav is set as root page it will be set as starting page and it not has back page.

AlertController

An alert controller is a dialog to represent the user information and it will resume the operation which done by the user. If the user wants to close the app, by using the alert pass the alert options.

ModalController

A modal controller is a pane, represent over the current page. The modal controller cant't set as root page and not be redirected to the previous page(Like an alert controller). The modal will dismiss by the view controller method.

MenuController

The menu controller is to control the side menu, toggle the menu and view the menu. The menu controller is easy to control the sidebar to the user. If the page link in the sidebar, the user can easy to control and redirect to other pages.

IonicApp

IonicApp declarative for all component. The ionicapp will be used to close the component before redirecting to the previous page. The ionic app will search for active portal and close first all and redirect.

   showAlert() {
           this.alert = this.alertCtrl.create({
            title: 'Exit?',
            message: 'Do you want to exit the app?',
                buttons: [
                 {
                     text: 'Cancel',
                     role: 'cancel',
                     handler: () => {
                     this.alert =null;
                  }
                  },
                 {
                     text: 'Exit',
                     handler: () => {
                     this.platform.exitApp();
                  }
               }
            ]
        });
       this.alert.present();
       }

      showToast() {
           alert("Press Again to exit");
       }

In Constructor

Add declarative value or all controller, Navbar, IonicApp, platform.Through the declarative variable used in app.component.ts. The RegisterBackButton() function will insert in the ready platform. The ready platform is written in platformready() function. The alert function is used to pass the alert option Like(do you want to exit the app?). In another function is used to exit by pressing the back button twice it will close the app. The registerBackButton() is written in platformReady() function, then build the app by ionic cordova build android and test it.Now the app will give the nice experience to the user.

export class MyApp {
 rootPage:any;
platform:any;      constructor(platform:Platform,modal:ModalController,menuCtrl:MenuController,ionicA         pp:IonicApp) {
          let ready=true;
           platform.registerBackButtonAction(() => {
                 let activePortal = ionicApp._loadingPortal.getActive() ||
                 ionicApp._modalPortal.getActive() ||
                 ionicApp._toastPortal.getActive() ||
                 ionicApp._overlayPortal.getActive();
                 if (activePortal) {
                     ready = false;
                     activePortal.dismiss();
                     activePortal.onDidDismiss(() => { ready = true; });
                     return;
                  }
                  if (menuCtrl.isOpen()) {
                     menuCtrl.close();
                     return;
                   }
                    let view = this.nav.getActive();
                    let page = view ? this.nav.getActive().instance : null;
                     if(this.nav.canGoBack()){
                        this.nav.pop();
                     }else{
                         if(this.alert){
                           this.alert.dismiss();
                           this.alert =null;
                     }else{
                          this.showAlert();
                     }
                  }
           }, 1);
        }
    }