Ionic 2 - Tab page lost back navigation

Question

Before my tabs page, I have few other regular pages and the "< Back" is always present at the left corner.

When reaching my tabs page, I am losing the "< Back" in my header. Why?

How do I get the back button back when using tabs in Ionic2?

Answer 1

If anyone face this problem, I think I have found the main issue in this cenary. The problem occurs when you are pushing from a "modal" or "popover" and so it happens the navigation problem. To do this the right way, execute the push or setRoot 'from the page that calls popover or modal instead'. This can be done easily with the 'onDidDismiss' function:

//Page which calls popover:
popover.create();

//Page popover: Dismiss existing popover (you may also pass a parameter)
popover.dismiss(myParameter);

//Page which calls popover: Veriry if popover was removed
popover.onDidDismiss(data => {
    if(data == "something")
    {
        //Navigate to new page
        this.nav.push(newPage)
    }
});

Answer 2

Meteor 1.2 with barbatus:ionic2-meteor

I tried what @Andreas Siivola said to try (override the css for the ion-tabs .back-button) and it did pop the tab page, but unfortunately it didn't pop the tab's parent page (containing the <ion-tabs>) and I was left with the parent navbar and a black area where the tab view used to be. I could then hit the back button of parent and finally go back to the previous page. So instead I created my own back button so I could bind a click event to it. At the top of all my tabs I have a navbar with a back button.

<ion-navbar primary *navbar>
    <ion-button start>
        <button clear light (click)="goBack()"><ion-icon name="arrow-back"></ion-icon></button>
    </ion-button>
    <ion-title>TabTitle</ion-title>
</ion-navbar>

Then in my typescript file I have the click method

goBack():void {
    this.nav.rootNav.pop();
}

The trick was to get the rootNav and call pop(). This took me back to the page that pushed the page containing the tabs.

Edit: Meteor 1.3.2.4 with ionic-angular NPM

I suppose this would also work in a regular ionic application as well.

ion-tabs ion-navbar-section ion-navbar .back-button {
    display: inline-block;
}

Update: Ionic 2.0.0-rc.5 Using css to force the back button to be displayed you can override the back button click event and dismiss the parent (Tabs) view controller using:

this.nav.parent.viewCtrl.dismiss();

tab1.html

<ion-navbar class="force-back-button">

tab1.css

.force-back-button .back-button {
  display: inline-block;
}

tab1.ts

import {OnInit, ViewChild} from '@angular/core';
import {NavController, Navbar} from 'ionic-angular';

export class TabPage implements OnInit {
    @ViewChild(Navbar) navBar:Navbar;

    constructor(public nav:NavController) {
    }

    ngOnInit() {
    }

    ionViewDidLoad() {
        this.navBar.backButtonClick = (e:UIEvent) => {
            console.log("Back button clicked");
            this.nav.parent.viewCtrl.dismiss();
        };
    }
}

Answer 3

Here what I did for my needs. The nav title is not the tab header and this is what I wanted:

Tabs.html

<ion-navbar *navbar primary>
  <ion-title>
    Unit # {{ unit.number }}
  </ion-title>
</ion-navbar>

<ion-content>
  <ion-tabs>
    <ion-tab tabTitle="Details" tabIcon="information-circle" [root]="_unitDetails"></ion-tab>
    <ion-tab tabTitle="Test" tabIcon="timer" [root]="_unitTests"></ion-tab>    <ion-tab tabTitle="Tools" tabIcon="hammer" [root]="_unitTools"></ion-tab>
  </ion-tabs>
</ion-content>

This way, the back button is still there and pop back to the previous page.

Answer 4

If you do ionic serve and inspect your tabs page's title you should see <ion-navbar> element. Inside that element you'll see a button with a class back-button. If you check that buttons styles you can see that there is a class that makes it hidden with display: none.

Now check the class name of the <ion-page> element that the button is in. In my case it's routes-page, then make a .scss file or use an existing one (remember to import it in app/pages/theme/app.core.scss)

add

.tabs-page .back-button {
    display: inline-block;
}

Now you're done and should have a working back button that pops the tabs page and return you to the previous one!

Answer 5

You could do something like this:

<div block button nav-pop>go back</div>

See: http://ionicframework.com/docs/v2/api/components/nav/NavPop/

Answer 6

Could you possibly use the (select) event and call a function which uses nav push and pop instead of using the [root] property of each tab?

http://ionicframework.com/docs/v2/api/components/tabs/Tab/

Something like:

<ion-tabs preloadTabs="false">
  <ion-tab (select)="chat()"></ion-tab>
</ion-tabs>

and

import {Chat} from '../chat/chat';

export class Tabs {
  constructor(nav: NavController){
    this.nav = nav;
  }
  chat() {
    this.nav.push(Chat);
  }
}

Answer 7

Looks like this is a bug. So it seem that currently, it is not possible with what is released to npm

Please submit an issue here.

http://ionicframework.com/submit-issue/

This should be possible, but something might have snuck in.

Answer 8

The navigation in Ionic works works like a pile of pages:

1. When you push a page on to the nav, it can be thought of as placing a new page on the top of the pile.
2. When you pop the existing page, it means removing that page from the top of the pile.
3. When you set the root page, it means that you are clearing your pile and simply creating a new pile with that page.

The "< Back" functionality will only be available if a new page is pushed, not when the root page is set.

To answer your original question:

The other pages show the "< Back" button since navigating to those pages simply pushes them to the pile, while in the case of tabs, "< Back" functionality might be unavailable due to setting the root page instead.