Ionic-framework: [4.0.0-rc.3] Back button not working with tabs

[amitairos]

Bug Report

Ionic version:
4.0.0-rc.3

Current behavior:
In the new RC, upon clicking the hardware back button in a tab, it does not go to the previous tab as before

Expected behavior:
It should either go to home tab, or to previous tab

Steps to reproduce:
See behavior.

Related code:

Other information:

Ionic info:

insert the output from ionic info here

[paulstelzer]

Thanks for your issue! This behaviour has been changed in this PR #17182

It's now use "pop()" and removes the page from stack. On tabs only if you push a page to the stack, you can use the back button to remove this page from it.

But there is

this.platform.backButton.subscribeWithPriority(9999, () => {
// You decide what happens 
});

Here you can define what should happen when the back button is pressed. Now you can use for example this.nav.back() (nav: NavController) which is the same like the browser back button

[amitairos]

@paulstelzer OK. Thanks. If I'm using lazy-loaded tabs, can I add them to the stack? Also, I'm now confused about when to use angular routing router.navigate... and when to use the NavController.
Could you please provide some guidance and which is better to use when?
Thanks

[alejandrombc]

Is there some way to go back without popping or using NavController but instead with Angular Router?. NavController is not going to be deprecated?.

Thanks!

[paulstelzer]

Why should NavController be deprecated? NavController is using Angular Router and you can do everything with Angular Router without needing to use NavController. For example you can use location back which is the same as nav.back(), but this has an animation

[amitairos]

@paulstelzer So what advantage does using Nav Controller have? Besides navigation, does it make back navigation easier? Also, should and can we use it with tabs?

[paulstelzer]

Here is the code -> https://github.com/ionic-team/ionic/blob/master/angular/src/providers/nav-controller.ts

As you can see it sets the animations automatically

[alejandrombc]

So...I've been reading the ionic documentation and I think there are two conflict concepts.

This: https://beta.ionicframework.com/docs/intro/concepts/#navigation
And this: https://beta.ionicframework.com/docs/building/migration/#navigation

We should or shouldn't use NavController?. For what I've seen, it looks like it should be used

[paulstelzer]

I invited a member of the official Ionic team to this topic, he will tell you more information about it :)

[alejandrombc]

Thanks!. I'll wait for his/her answer!

[mhartington]

Hello!

So NavControllers is not going away, just the internals have changed compared to V3.

We recommend for most use cases that people use Angular Router's API, like routerLink or navigateByUrl

For more control with Ionic's StackNavigation setup (IE Tabs), navController has been modified to support the new setup and work with Angular Router.

[amitairos]

@mhartington Could you please give examples where I should use each?

[mhartington]

For more control with Ionic's StackNavigation setup (IE Tabs), navController has been modified to support the new setup and work with Angular Router.

Pretty much if you need fine-grade control over the navigation stack. Working with tabs are a good use case here.

[amitairos]

@mhartington How can I use this with tabs?

[alejandrombc]

@mhartington So, another use case may be to have a preset animation for going back (instead of using location.back) using nav.back.

[manucorporat]

NavController in V4 is just a thin wrapper on top of Angular Router, it does not replace it. It is just useful when you want a fine control over the animations (transitions) and stack.

Stack, you can go forward and backward, pushing or popping pages from the DOM. How do you control it? Using the angular router.

BUT if you want fine control, NavController exposes additional APIs for you to control it.

Tabs is a good use case, take a iOS native app, imagine you navigate forward in a tab and now you switch to a different tab. The "navigation" performed in the first tab is still there when you go back, that's what the "stack" does for you.

The stack is handled automatically by Ionic when using the Angular Router.

There is a confusion between v3 NavController and v4 NavController:

• V3: NavController was <ion-nav>
• V4: NavController is an Angular providers that wraps the angular's router.

Source code is the best documentation:
https://github.com/ionic-team/ionic/blob/master/angular/src/providers/nav-controller.ts#L183-L190

Thanks for the feedback, this helps a lot to understand what things are confusing and we can focus our efforts to improve the documentation of this parts of Ionic!

Going to close this issue, since github issues are not intended for support purposes.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.