Ionic 4 Hardware Back button Event

Ionic Hard Ware Back

Hardware compatibility is essential in any Android App. Recently i was working with Ionic 4 and the back button event of Platform is not working i try numerous solutions on StackOverflow all to no avail.

Previous hardware back button is handled out of the box with Ionic Version 3 with this syntax and work seamlessly

configureBackButton() {
this.platform.registerBackButtonAction(() => {
//your logic goes here
}
}

Today am going to show you how to handle this with Ionic 4 with this little logic

Install a new ionic project or use an existing one

npm install -g ionic

Then start a new Project

ionic start myApp tabs

open your app.component.ts file and add this line before the constructor and import the file also

import { Platform, NavController, IonRouterOutlet } from '@ionic/angular';
import { Router } from '@angular/router';
@ViewChildren(IonRouterOutlet) routerOutlets: QueryList<IonRouterOutlet>;

Then write this method in your app.component.ts and add it to your constructor you Can name your method the way you like or your style

backButtonEvent() {
document.addEventListener("backbutton", () => {
this.routerOutlets.forEach((outlet: IonRouterOutlet) => {
if (outlet && outlet.canGoBack()) {
outlet.pop();
}else if(this.router.url === "tabs/tab1"){
navigator['app'].exitApp(); // work for ionic 4
} else if (!outlet.canGoBack()) {
navigator['app'].exitApp(); // work for ionic 4
}
});
});
}

your constructor should look like this

constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar,
private network: Network,
private router: Router,
) {
this.initializeApp();
//method added to constructor
this.backButtonEvent();
}

The major difference between this and the previous version is we calling ;

document.addEventListener("backbutton", () => {
     // your Logic goes here
    }
}

Thank you very much for reading I hope this helps someone happy coding