The hardware back button on and Android device doesn’t have its default behaviour. Going to a page and then pressing the back button doesn’t do anything.
Steps to Reproduce
Go to any page
Press the hardware back button
Doesn’t go back
here is ionic info
Ionic:
Ionic CLI : 6.1.0 (C:\Users\saad.saeed\AppData\Roaming\npm\node_modules@ionic\cli)@ionic /angular 5.0.1@angular-devkit /build-angular : 0.803.25@angular-devkit /schematics : 8.3.25@angular /cli : 8.3.25@ionic /angular-toolkit : 2.1.2
Capacitor:
Capacitor CLI : 1.5.0@capacitor /core : 1.5.0
Cordova:
Cordova CLI : 8.1.2 (cordova-lib@8.1.1)
Utility:
cordova-res : not installed
System:
Android SDK Tools : 26.1.1 (C:\Users\saad.saeed\AppData\Local\Android\android-sdk)
Ibeqk
February 21, 2020, 6:52pm
2
it woud be useful if you share a portion of the HTML or method (ts file) that navigate from one route to the other.
AFAIK a page doesn’t have a stack, so no back navigation is available because there is nothing to navigate to, unless you want to exit the app.
I am also facing the same problem. Did you find any solution?
I am also facing the same issue.Considering a basic page hardware back button does nothing.
1 Like
I have the same problem btw.
1 Like
@shepard77 @Ibeqk @distante @MeerDev @Harish18
please try this example its work for me
import { Component, OnInit, QueryList, ViewChildren } from '@angular/core';
import { Platform, AlertController, IonRouterOutlet } from '@ionic/angular';
import { Router} from '@angular/router';
import {Location} from '@angular/common';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss']
})
export class AppComponent implements OnInit {
@ViewChildren(IonRouterOutlet) routerOutlets: QueryList < IonRouterOutlet > ;
lastTimeBackPress = 0;
timePeriodToExit = 2000;
constructor(
private platform: Platform,
private alertController: AlertController,
private router: Router,
private location: Location
) {
this.backButtonEvent();
}
backButtonEvent() {
this.platform.backButton.subscribeWithPriority(0, () => {
this.routerOutlets.forEach(async(outlet: IonRouterOutlet) => {
if (this.router.url != '/home') {
// await this.router.navigate(['/']);
await this.location.back();
} else if (this.router.url === '/home') {
if (new Date().getTime() - this.lastTimeBackPress >= this.timePeriodToExit) {
this.lastTimeBackPress = new Date().getTime();
this.presentAlertConfirm();
} else {
navigator['app'].exitApp();
}
}
});
});
}
async presentAlertConfirm() {
const alert = await this.alertController.create({
// header: 'Confirm!',
message: 'Are you sure you want to exit the app?',
buttons: [{
text: 'Cancel',
role: 'cancel',
cssClass: 'secondary',
handler: (blah) => {}
}, {
text: 'Close App',
handler: () => {
navigator['app'].exitApp();
}
}]
});
await alert.present();
}
}
4 Likes
saad-ansari:
this.backButtonEvent();
Thank you so mush it’s work for me
1 Like
gokujy
January 22, 2021, 12:14pm
10
You can also try the following code snippets,
Make a change or add code like this in your app.component.ts file
import { Component, ViewChildren, QueryList } from '@angular/core';
import { Platform, IonRouterOutlet, ToastController } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { Router } from '@angular/router';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss']
})
export class AppComponent {
//code for exit app
// set up hardware back button event.
lastTimeBackPress = 0;
timePeriodToExit = 2000;
//code for exit app
@ViewChildren(IonRouterOutlet) routerOutlets: QueryList<IonRouterOutlet>;
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar,
private toastController: ToastController,
private router: Router,
private speechRecognition: SpeechRecognition
) {
this.initializeApp();
// Initialize BackButton Eevent.
this.backButtonEvent();
}
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleLightContent();
this.splashScreen.hide();
});
}
// active hardware back button
backButtonEvent() {
this.platform.backButton.subscribe(async () => {
this.routerOutlets.forEach(async (outlet: IonRouterOutlet) => {
if (outlet && outlet.canGoBack()) {
outlet.pop();
} else if (this.router.url === '/home') {
if (new Date().getTime() - this.lastTimeBackPress < this.timePeriodToExit) {
// this.platform.exitApp(); // Exit from app
navigator['app'].exitApp(); // work in ionic 4
} else {
const toast = await this.toastController.create({
message: 'Press back again to exit App.',
duration: 2000,
position: 'middle'
});
toast.present();
// console.log(JSON.stringify(toast));
this.lastTimeBackPress = new Date().getTime();
}
}
});
});
}
}
Make a change or add code like this in your home.ts file or where you want to user exit from your app page .
import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
public subscription: any;
constructor(private platform: Platform) { }
ionViewDidEnter() {
this.subscription = this.platform.backButton.subscribe(() => {
navigator['app'].exitApp();
});
}
ionViewWillLeave() {
this.subscription.unsubscribe();
}
}
Hope it helps you.
this.platform.backButton.subscribeWithPriority()
this.platform.backButton.subscribe()
it would be useful if you share a portion of the HTML or method (ts file) that navigate from one route to the other.