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

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 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();
        };
    }
}