Back Button not shown when using ionic-tab

Ionic Framework ionic-v3
1

Hello,

in none of my tabs the backbutton is shown.
I have a TabsPage, see template here

<ion-tabs selectedIndex="0">
  <ion-tab [root]="contactPage" tabTitle="Contact"></ion-tab>
    <ion-tab [root]="aboutPage" tabTitle="AboutPage"></ion-tab>
</ion-tabs>

I navigate to the TabsPage from another page using

this.navCtrl.push(TabsPage);

In every other pages the back button is shown, only in tabs it does not work.

2

You have to do something like this in the html file of your sub-Tab page


<ion-header>

  <ion-navbar color="primary">
    <ion-buttons left>
      <button ion-button icon-only (click)="onClickCancel()">
        <ion-icon name="arrow-back"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title>Chatraum - Einstellungen</ion-title>
  </ion-navbar>

</ion-header>

in the ts file

public onClickCancel() {
    this.viewCtrl.dismiss();
  }
3

ok its nearly works except for the call

  this.viewCtrl.dismiss();

It leads to exception

core.es5.js:1020 ERROR Error: Uncaught (in promise): navigation stack needs at least one root page

Is it possible to get the previous page of TabPage in the sub-pages.
Or should I pass the previous page within the rootParams.

4

I have the same problem yesterday :slight_smile:
This solution worked for me:

tabs.ts

this.data = {
      viewCtrl: this.viewCtrl
    }

tabs.html

<ion-tab [tabsHideOnSubPages]="true" [root]="tab1Root" [rootParams]="data" tabTitle="Allgemein" tabIcon="settings">

Sub-Tab page.ts

constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    public viewCtrl: ViewController
  ) {
    this.viewCtrl = this.navParams.get('viewCtrl');
  }

  public onClickCancel() {
    this.viewCtrl.dismiss();
  }

Sub-Tab page.html

<ion-navbar color="primary">
    <ion-buttons left>
      <button ion-button icon-only (click)="onClickCancel()">
        <ion-icon name="arrow-back"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title>Chatraum - Einstellungen</ion-title>
  </ion-navbar>
6 Likes
5

You made my weekend. Thank you.

1 Like
6

Continuing the discussion from Back Button not shown when using ionic-tab:

Didn’t know the parameter [tabsHideOnSubPages], exacly what i needed. Thanks a lot!!

7

Show/hide “Back” label based on platform - something that happens automatically for regular pages:

<ion-navbar color="primary">
    <ion-buttons left>
      <button ion-button icon-only (click)="onClickCancel()">
        <ion-icon name="arrow-back"></ion-icon>
        <span showWhen="ios">Back</span>
      </button>
    </ion-buttons>
    <ion-title>Chatraum - Einstellungen</ion-title>
  </ion-navbar>
1 Like