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

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

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) .

Hello all! I am going to be closing this issue as we only plan on supporting tabs as the root page at this time and using segments should fix the issue here. @fdelayen If you have any issues using segments feel free to hit up our forum. Thanks for using Ionic!

Thanks to all who provided this solution. Works like a charm! I disagree with others who don’t see this configuration as useful. A list of buttons that each takes you to a tabs-based detail page for the corresponding entity is very intuitive for what we are trying to do. Having a back-button on the tabs-based detail page to return to the list makes perfect sense to our users. Furthermore, tabs-based navigation on the detail pages is highly preferable to segments, so thanks again to those who provided the workaround!

@mjwheatley I have a small addition to anyone who might have the same problem as I did: In Ionic 3.10 default tabs template doesn’t have navbar component and it makes navBar undefined. So code from TabPage.ts have to go to child components. E.g. my home.ts looks like this:

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

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild(Navbar) navBar: Navbar;

  constructor(public navCtrl: NavController) {

  }

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

}

great !

Thank you @zakton5 @jgw96 @mpaland for your answers. I have the same structure as zakton, my root page is a list of things, and when I click on this thing, I have many informations to display in categories so it definitely cannot be my root page and using segments is a bit tricky and we will need a lot of refactoring 😞

That’s the thing @mpaland, the tabs page isn’t necessarily always going to be the root of an application. I myself have this same issue. My root page is a list, and then when I click an item I push a tabs page onto the nav stack because each item has a LOT of content that needs to be displayed in different categories, which is why I use tabs. It’s really the best for my situation. Ionic 2 should have support for non-root tab pages