v2 : ion-navbar does not show back button in ion-tabs page

Short description of the problem:

Since v2 beta 10 ion-navbar does not show back button in ion-tabs page.

What behavior are you expecting?

If there is a possibility to go back to another view from an ion-tabs base page, it should display the back button and not the menu button.

Steps to reproduce:

1. Create a simple app : A left menu, a simple page that push an ion-tabs page with the following toolbar :

<ion-navbar>
  <button menuToggle="left">
    <ion-icon name="menu"></ion-icon>
  </button>
</ion-navbar>

1. Navigate to it and it will show a menu button that does not allow to go back. (it triggers the menu)

Which Ionic Version? v2 beta 10

Run ionic info from terminal/cmd prompt: (paste output below)

Your system information:

Cordova CLI: You have been opted out of telemetry. To change this, run: cordova telemetry on. 6.2.0

Gulp version: CLI version 3.9.0 Gulp local: Local version 3.9.1 Ionic Framework Version: 2.0.0-beta.10 Ionic CLI Version: 2.0.0-beta.32 Ionic App Lib Version: 2.0.0-beta.18 OS: Distributor ID: Ubuntu Description: Ubuntu 16.04 LTS Node Version: v6.3.0

[mjwheatley]

I just saw @jgw96 closing comment to try using segments instead, but I did find a solution building on @mordka answer.

I found this StackOverflow answer about overriding the back button click http://stackoverflow.com/questions/38906715/ionic-2-generated-back-button-click-event

So by 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();

In your TabPage.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();
        };
    }
}

[mordka]

If anynone’s interested in having the back button and using tabs here’s a simple css hack:

//tab1.html (root page)
 <ion-navbar class="force-back-button">
//css
.force-back-button .back-button {
  display: inline-block;
}

Would be nice to have hideBackButton="false" directive working on nav-bar (docs) .