How to skip Tabs Page, when user clicks Back button(<) in Other page

Ionic Framework ionic-v3
1

Hi,
I have Page1->Page2->TabsPage -> Page2.
While clicking back button(<) in Page2, actually I needs to go to Page1. But I’m currently navigting back to TabsPage. How can I skip the TabsPage and show Page1, while clicking (<).
Can Anyone help me out?..

2

You should try something like this.

ionViewDidLoad() {
    this.navBar.backButtonClick = (e:UIEvent)=>{
       this.nav.setRoot(Page1);
       this.nav.popToRoot();
    }
1 Like
3

RootpageWithTabsHeader

Ya, But I’m getting like as shown in image(Tabs Header came ie…Full Talk Time, TopUp etc…), How to hide this?..

4

I don’t get it what do you want exactly ?

5

Your answer is correct actually. But after copy-pasted your code, I’m navigating to from Page2 to Page1(ie. Rootpage). But the problem is I’m getting extra header(ie. of Tabs Page) in Page1 which is as shown in image.

6

Can you show some code please ? :slight_smile:

7

Sure…

OnViewPlans(subscriptionId,operatorId,circleId,nname){
     this.navCtrl.push(BasicPage, { 'OperatorId':operatorId,'CircleId': circleId,'ParentId':this.ParentId});   
  }

After calling above method of Page2(MobileRechargePage), user will be navigated to TabsPage(BasicPage). And then after calling below method, he will be navigated back to the previous page ie. Page2(MobileRechargePage). Now If I click back button in Page2 I should go to Page1, not to Tabs Page(By default, it is going back to Tabs Page ie. previous page, But I should convert the path to Page1)

OnAmount(amount){
    let resultIndex = this.navCtrl.last().index; 
     this.navCtrl.push(MobileRechargePage, { 'Amount':amount,'ParentId':this.navParams.get('ParentId')}).then(() => {
      this.navCtrl.remove(resultIndex, 1);     
    });   
  }

I think, my question is more clear now…

8

Users expect consistency. The back button means “go back to where I just was”. In effect, it’s an undo operation. Subverting that expectation and programatically altering what “back” means is going to result in a confusing and counterintuitive navigation experience. I would strongly suggest rethinking this design.

9

But you can see my requirement in Paytm and PhonePe mobile application. I need same feature. According to me, it is a good navigation logic in that particular.

10

https://drive.google.com/open?id=1NpBmi2VpSW46Em4sH_f0ItcSCnlca3fG

You can find the sample project in above link. So that you can understand the problem very well.

Please follow below steps to know the bug

  1. Open the project in VS Code and run npm install in integrated terminal window.
  2. Run ionic serve
  3. Click on Recharge/Payments
  4. Select the options in Operator and State selectbox.
  5. Click on ViewPlans
  6. Click on the plan Talktime:1
  7. Click on GOBACK. Now you will be navigated to home page. You can now observe the difference between actual home page and the home page came after clicking on plan of ViewPlans
11

Your issue is that you are navigating from within a tab to a page in the tab’s (parent’s) stack, which is out of your scope.
Your current page is the rootpage of the tab’s stack, but you need to go to the root of the parent page.
I am currently facing the same issue, any leads?

12

I think this is the answer

just tried it and it works!

import { App } from ‘ionic-angular’;

constructor(public appCtrl: App){}
add to controller .

logout() {
this.appCtrl.getRootNav().pop();
}

4 Likes
13

Thanks bro…Your solution works