Android hardware back button in ionic

Ionic Framework ionic-v3
22

Thanks,

But I already have this code inside

initializeApp() {
	this.platform.ready().then(() => {
		StatusBar.styleDefault();
		this.dbs.init({});

		this.platform.registerBackButtonAction(this.goBack);
        );
}
goBack() {
	this.nav.setRoot(Main);
}

Still same problem. The nav object is undefined

23

Do you have this code in the app.ts class? If yes, do you declare the nav within the constructor?

If yes and yes, try to declare it differently like

 @ViewChild(Nav) nav:Nav;

Hope it could helpā€¦

24

I have this code in the app.ts class and nav is declared like
@ViewChild(Nav) nav:Nav;

Very strange behaviour hereā€¦

25

:frowning:

Iā€™m not a javascript/angular expert, but could that be a ā€œmethod pointerā€ problem, does it work when you donā€™t call a method but access the nav directly in your function?

initializeApp() {
this.platform.ready().then(() => {
	StatusBar.styleDefault();
	this.dbs.init({});

             // Like this
	this.platform.registerBackButtonAction(() => {
                    this.nav.setRoot(Main);
            });
    );

}

2 Likes
26

So, when this back button functionality come?

27

Hi,

Is the back button functionality implemented in 2.1.1? Any links to get started? Thank you!

Fred

28

Yes, it works in RC02:

 this.platform.ready().then(() => {
      this.platform.registerBackButtonAction(() => {
        this.nav.setRoot(YourPage); 
      });
 });
3 Likes
29

Hi,

Android hardware back button issue is fixed. Update the ionic framework Version to 2.0.0-rc.4

Tested in android avd and genymotion emulators.

30

what is nav in this? it gives error > Property ā€˜navā€™ does not exist on type ā€˜MyAppā€™

31

Heyo!

nav is of type NavController. The more complete code would be:

constructor(private platform: Platform, private nav: NavController) {
    this.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.

      StatusBar.styleDefault();
      Splashscreen.hide();

      this.platform.registerBackButtonAction(() => {
        this.nav.setRoot(YourPage); 
      });
    });
  }

which is found in the main appComponent: ā€œapp.component.tsā€.

1 Like
32

Iā€™m getting the following error:
No provider for NavController!

33

Hmmm, did you import the NavController component from ionic-angular?

import { NavController } from 'ionic-angular';

If that was not the issue, could you describe it in more detail or paste a code snippet?

PS: the official documentation regarding navigation and the navController is pretty awesome too: https://ionicframework.com/docs/v2/api/navigation/NavController/. You should check it out :slight_smile:

34

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
        }
      });
    });
  }
6 Likes
36

Wow @NyaOā€¦ this is awesome. Btw, where in Ionic documentation do we have a reference to getActiveNav() ???

37

Obviously, parameter priority was not working (affects nothing) in Ionic 2.0.0-rc.4ā€¦ Is this param working as expected in the latest version of Ionic? Letā€™s say Ionic 2.0.0 (2017-01-25)ā€¦?

38

we need use registerBackButtonAction on all needable pages or only one ?

39

You can use on all pages you need. But I donā€™t know what is your situation. I use it for all my pages.

40

Now no. But it is present in native code of ionic. You can use getRootNav() but I prefer getActiveNav(). Which is now active.

41

Yes absolutely. Besides, getRootNav() doesnā€™t work when we have several (stacked) NavControllers in action, for example - in several tabs.

42

Yes. Thatā€™s why I use getActiveNav() and canGoBack() function