I am facing an issue how to handle the default mobile's back button which checks the confirmation while exiting from the application, if I pressed the back button there should invoke some handler which shows pop-up, for confirm exiting. OR there is any method call registerBackButtonAction()? or is it so how to use it in IONIC 2,? Please help me out. Thanks in Advance.
The hardware back button is found on most Android devices. In native applications it can be used to close modals, navigate to the previous view, exit an app, and more. By default in Ionic, when the back button is pressed, the current view will be popped off the navigation stack, and the previous view will be displayed.
backButton. subscribeWithPriority(99999, () => { navigator['app']. exitApp(); });
App. exitApp(); Force exit the app. This should only be used in conjunction with the backButton handler for Android to exit the app when navigation is complete.
Ionic latest version 3.xx
app.component.ts
file:
import { Platform, Nav, Config, ToastController } from 'ionic-angular';
constructor(public toastCtrl: ToastController, public platform: Platform) {
platform.ready().then(() => {
//back button handle
//Registration of push in Android and Windows Phone
var lastTimeBackPress = 0;
var timePeriodToExit = 2000;
platform.registerBackButtonAction(() => {
// get current active page
let view = this.nav.getActive();
if (view.component.name == "TabsPage") {
//Double check to exit app
if (new Date().getTime() - lastTimeBackPress < timePeriodToExit) {
this.platform.exitApp(); //Exit from app
} else {
let toast = this.toastCtrl.create({
message: 'Press back again to exit App?',
duration: 3000,
position: 'bottom'
});
toast.present();
lastTimeBackPress = new Date().getTime();
}
} else {
// go to previous page
this.nav.pop({});
}
});
});
}
In app.component.ts
@ViewChild(Nav) nav: Nav;
constructor(private platform: Platform, private toastCtrl: ToastController, private alertCtrl: AlertController) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need
platform.registerBackButtonAction(() => {
//uncomment this and comment code below to to show toast and exit app
// if (this.backButtonPressedOnceToExit) {
// this.platform.exitApp();
// } else if (this.nav.canGoBack()) {
// this.nav.pop({});
// } else {
// this.showToast();
// this.backButtonPressedOnceToExit = true;
// setTimeout(() => {
// this.backButtonPressedOnceToExit = false;
// },2000)
// }
if(this.nav.canGoBack()){
this.nav.pop();
}else{
if(this.alert){
this.alert.dismiss();
this.alert =null;
}else{
this.showAlert();
}
}
});
});
}
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();
}
}
]
});
alert.present();
}
showToast() {
let toast = this.toastCtrl.create({
message: 'Press Again to exit',
duration: 2000,
position: 'bottom'
});
toast.onDidDismiss(() => {
console.log('Dismissed toast');
});
toast.present();
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With