Summary: This is a comprehensive method for handling Android back button in Ionic 2 and Ionic 3. The back button will behave like in Instagram: it will close the side menu or any pushed pages, and it will also circle between most recently used tabs.
Note: If you are an advanced user and just want to see the result, you can clone the demo project from my github.
Handling Android Back Button in Ionic
Handling Android Back button have been addressed in several places, such as here. But I didn’t find any of them to be comprehensive and complete. I needed a method that does the following:
In this article, I quickly explain how to perform the above.
We will perform the following:
You can create a new ionic 3 project by running the following in the command line, accept the default options and cd into the backbutton folder:
ionic start backbutton sidemenu
Now, add three tab pages to this project:
ionic generate page page1 --no-moduleionic generate page page2 --no-moduleionic generate page page3 --no-module
You will need to add these pages to app.module.ts. Add the following to the beginning of the file:
import { Page1Page } from '../pages/page1/page1';import { Page2Page } from '../pages/page2/page2';import { Page3Page } from '../pages/page3/page3';
Also, add them to declarations and entryComponents in the same file:
declarations: [MyApp,HomePage,ListPage,Page1Page, // Add this line!Page2Page, // Add this line!Page3Page, // Add this line!],
...
entryComponents: [MyApp,HomePage,ListPage,Page1Page, // Add this line!Page2Page, // Add this line!Page3Page, // Add this line!],
Create a New Service: BackbuttonService
Create a new folder and file under src:
src/services/backbutton.service.ts
Note: Rather than copying the complete file here, you can get it from my github.
This file has two simple functions for push and pop of tab pages so that we can track the most recently used tab page.
You also need to register the service in app.module.ts:
import { BackbuttonService } from "../services/backbutton.service";...providers: [StatusBar,SplashScreen,BackbuttonService, // Add this line!]
Create a Global Variable for Tabs:
Create a new file called app.config.ts. You can put it anywhere. I chose to put it under src/app. It contains the following:
//Enum variable for tabexport var EN_TAB_PAGES = {EN_TP_HOME: 0,EN_TP_PLANET:1,EN_TP_STAR: 2,EN_TP_LENGTH: 3,}
//A global variableexport var Globals = {
//Nav ctrl of each tab pagenavCtrls : new Array(EN_TAB_PAGES.EN_TP_LENGTH),
tabIndex:0, //Index of the current tabtabs: <any>{}, //Hook to the tab object}
We add three functions to this file:
Since the changes are long, I don’t copy them here, but you can see the detailed changes on my github.
Each time we open a new tab page, we should push it into the stack. If it already exists in the stack, we remove it and add it again. This will create the Instagram effect where we circle around recently used tabs but we won’t go through the same tab twice. In order to do so, we inject the backbuttonService in each tab page and use it.
In each tab page add the following:
import { BackbuttonService } from '../../services/backbutton.service';import { EN_TAB_PAGES } from "../../app/app.config";
...
//Inject the serviceconstructor(public navCtrl: NavController,public navParams: NavParams,private backbuttonService: BackbuttonService,
) {}
...
ionViewWillEnter() {this.backbuttonService.pushPage(EN_TAB_PAGES.EN_TP_HOME,this.navCtrl);}
In the above code, note that for each tab page, you should use its own EN_TAB_PAGES value.
That’s it! If you liked this tutorial, please share and clap. I would really appreciate it!
Also, for production-level Ionic apps that handle Android back button correctly, please check my following apps: