I can't handle android back button on Ionic 4

Question

I am new on ionic development.I have tried more and more way by following articles. Finally I have tried on this Handling hardware back button in Ionic3 Vs Ionic4 Please help me @Fabian N.

But on device, I can't seem if the back button work regards code... that is the code is not work in my case. :(

This is my ionic info.

Ionic:

   Ionic CLI                     : 5.2.3 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.6.2
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.0.0, ios 5.0.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 16 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 0.2.8 

System:

   ios-deploy : 1.9.4
   ios-sim    : 8.0.1
   NodeJS     : v11.10.1 (/usr/local/bin/node)
   npm        : 6.7.0
   OS         : macOS Mojave
   Xcode      : Xcode 10.2 Build version 10E125

Already I have tried bellow event in app.component.ts. but I can't get any alert on real device when click back button.

1. Test case
  this.platform.backButton.subscribe(async () => {
     alert("Fired Back Button"); 
  });

2. Test case
  this.platform.backButton.subscribe(() => {
     alert("Fired Back Button"); 
  });

3. test case
  this.platform.backButton.subscribeWithPriority(0, () => {
     alert("Fired Back Button"); 
  });



4. test case
  this.platform.backButton.subscribeWithPriority(100, () => {
     alert("Fired Back Button"); 
  });

In this case 4, I have tried such as priorities : 100, 101, 400, 999999. but I can't get any alert when click android back button.

But the actually back button always pop pages.

I just need to handle android hardware back button on my project. Please help me. Thank you in advance. Best Regards

Please provide a proper description of your problem and show some code. Are you getting an error message? If so, which one? — Daniel Hilgarth, Sep 24 '19 at 07:05
Hi @DanielHilgarth Thanks for your reply. I have modified my question with codes with I have tried. Please check and help me. — DarkHorse, Sep 24 '19 at 10:56

DarkHorse · Accepted Answer · 2019-12-10T11:58:19.227

3

Finally I have got correct answer for my question. The solution was Enol's answer. I have wrote in my app.component.ts file.

const event = fromEvent(document, 'backbutton');
event.subscribe(async () => {
  // logic for navigation, modal, popover, menu closing
  this.navCtrl.pop(); // I have used for my case

  ...

});

Thanks Markus.

edited Dec 10 '19 at 11:58

answered Sep 28 '19 at 20:04

DarkHorse

339
4
16

score 1 · Answer 2 · answered Nov 26 '19 at 19:53

refactoring ZhiYi's answer

This work!

    const event = fromEvent(document, 'ionBackButton');
    event.subscribe(async () => {
        console.log('hardware back button triggered')
    })

    //you may want store that subscription and unbscribe on ngOnDestroy.

Or peterpeterparker solution from github

    @HostListener('document:ionBackButton', ['$event'])
     private overrideHardwareBackAction($event: any) {
         $event.detail.register(100, async () => {
          // Do what you want
         });
     }

score -1 · Answer 3 · answered Sep 24 '19 at 07:51

-1

You can try this one

this.platform.backButton.subscribe(() => {
  // this does work
});

answered Sep 24 '19 at 07:51

yoosuf

29
3

Hi @yoosuf, thanks for your reply, already I have tried but I can't back button event on the scope. thanks – DarkHorse Sep 28 '19 at 19:56

I can't handle android back button on Ionic 4

3 Answers3