Default device back button not working properly with tabs : IONIC

Question

I have the below page structure Login --> Tabs(Home) --> products list --> cart

When i login in login page, i am showing the default tabs page where i have 4 tabs(Home, Search, Cart, More). When i click on merchant item in the home page, i am navigating to merchant details page, where i will show list of menu items provided by him. Once i add few items to cart from menu page i will add them to cart. I am showing a button to go to cart. When he click on the button, the user will go to cart page, where he will see all the items added to cart.

Here when the user clicks on the device back button he is going to login page, not to the products list page.

I am using angular router for navigation. In browser it is working fine, but not in real device. Please help me to fix the issue.

Answer 1

You could try to capture the back button event and redirect the user whenever you want...

public subscription: Subscription;

constructor(
  private platform: Platform
) {
  this.subscription = this.platform.backButton.subscribeWithPriority(0, () => { /* Your function */ });
}

ngOnDestroy() {
  this.subscription.unsubscribe()
}

The zero value (0)is the priority of the event, when you put zero, Ionic exect your function before anything else (page transitions, close modals, etc)

Is a good practice to create an attribute subscription to destroy it when you are going to leave the page and avoid memory leaks.