CODEWITHSUNDEEP
androidangularjsionic-framework
Dev.W
Dev.W

Reputation: 2370

Ionic Back Button

I have basic Ionic application which I have disabled the back button on the app, is there a reason why the back button still works on an android device?

I am currently testing with ionic view.

here's my code:

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
  $ionicPlatform.registerBackButtonAction(function(e) {
  e.preventDefault();
  }, 101);
})

Upvotes: 6

Views: 2481

Answers (4)

Alexander Zakusilo
Alexander Zakusilo

Reputation: 1566

Here is solution for Ionic 2:

constructor(
    public platform: Platform, //Platform controller
    public app: App, //App controller
  ) {
    platform.ready().then(() => {
      StatusBar.styleDefault();
      Splashscreen.hide();

      //Registration of push in Android and Windows Phone
      platform.registerBackButtonAction(() => {
        let nav = this.app.getActiveNav();
        if (nav.canGoBack()){ //Can we go back?
          nav.pop();
        }else{
          this.platform.exitApp(); //Exit from app
        }
      });
    });
  }

Upvotes: 1

Dave
Dave

Reputation: 5416

For anyone trying to sort this on Ionic 2:

http://www.codingandclimbing.co.uk/blog/ionic-2-android-back-button-13

and here's the actual post info:

In your app.ts, do the following to get the back button working as expected (mostly!):

  initializeApp() {
    this.platform.ready().then(() => {
      this.registerBackButtonListener();
    });
  }

  registerBackButtonListener() {
    document.addEventListener('backbutton', () => {
      var nav = this.getNav();
      if (nav.canGoBack()) {
        nav.pop();
      }
      else {
        this.confirmExitApp(nav);
      }
    });
  }


confirmExitApp(nav) {
    let confirm = Alert.create({
      title: 'Confirm Exit',
      message: 'Really exit app?',
      buttons: [
        {
          text: 'Cancel',
          handler: () => {
            console.log('Disagree clicked');
          }
        },
        {
          text: 'Exit',
          handler: () => {
            navigator.app.exitApp();
          }
        }
      ]
    });
    nav.present(confirm);
  }

  getNav() {
    return this.app.getComponent('nav');
  }

Note:

If you get errors about app not being a property of navigator:

1) Add a typings folder to your app root: e.g. app/typings

2) Add a file called: pluginshackyhacky.d.ts

3) Add for properties you need extended for TypeScript to compile.:

interface /*PhoneGapNavigator extends*/ Navigator {
    app: any;
}

4) Add the pluginshackyhacky.d.ts to the compile in the tsconfig.json:

  "files": [
    "app/app.ts",
    "app/typings/pluginshackyhacky.d.ts",
    "app/typings/phonegap.d.ts"
  ]

You can see that I've also included the phonegap.d.ts file which includes a lot of missing properties/variables that allows TypeScript to compile without errors.

Hope this helps anyone having this problem.

Cheers.

Upvotes: 4

Hisham
Hisham

Reputation: 2746

According to ionic documentation

Your back button action will override each of the above actions whose priority is less than the priority you provide.

And given that you want to completely disable the back button in all situations, and that the highest priority on actions in the referenced list is 500, you should provide a priority value more than 500, 600 for example. The code below should work when placed in $ionicPlatform.ready() 

 $ionicPlatform.registerBackButtonAction(function(e) {}, 600);

Upvotes: 5

knfd
knfd

Reputation: 89

Change the priority from 101 to 100 to override the default hardware back functionality. If you had a priority of 100 already overriding the functionality, you could override that override with a priority of 101, if that makes sense.

$ionicPlatform.registerBackButtonAction(function(e) {
    // android hardware back button was hit
}, 100);

Here is a list of all the priorities for the existing back button hooks

http://ionicframework.com/docs/api/service/$ionicPlatform/

Upvotes: -1

Related Questions