tabsHideOnSubPages:false not working when a new page is pushed

Hi,

I have a simple tabs applications with 3 tabs configured in a page called Dashboard. Switching between the tabs works well and other pages load up inside the tabbed stack. All Good.

Now I am attempting to dynamically push and bring into focus a new page when a button in the header is clicked. I have the tabsHideOnSubPages:false configured in app.module.ts but it doesn’t seem to work. The page loads without the tabs and I see a Back arrow in the header.

Not sure what I’m doing wrong. Seems like I need to push into the tabbed stack and reference the correct tab index but I don’t know how to do it.

Dashboard.ts

export class Dashboard {
  tab1root = Page1;
  tab2root = Page2;
  tab3root = Page3;

  constructor(public navCtrl: NavController, public navParams: NavParams,private menu:MenuController) {
/*Ignore this. Some old code when I was trying to add multiple sidemenus to the page. Don't have the menuToggle on the page template anymore  */  
this.menu.enable(false,"menu1");  
    this.menu.enable(false,"menu2");
  }
  ionViewDidLoad() {
    console.log('ionViewDidLoad Dashboard');
  }
  profileClicked(event){
    this.navCtrl.push(Profile);
  }
}

Dashboard.html

<ion-tabs>
  <ion-tab [root]="tab1root" tabTitle="Page1" tabIcon="color-wand" color=primary></ion-tab>
  <ion-tab [root]="tab2root" tabTitle="Page2" tabIcon="star" tabBadge="3" color=primary></ion-tab>
  <ion-tab [root]="tab3root" tabTitle="Page3" tabIcon="logo-usd" color=primary></ion-tab>
</ion-tabs>

<ion-header>
  <ion-toolbar>
   <ion-title>
      <img class="titleLogo" src="/assets/img/titleicon.png"/>
    </ion-title>
    <ion-buttons left>
     <button ion-button icon-only (click)="profileClicked($event)">
        <ion-icon name="person" color=primary></ion-icon>
      </button>
    </ion-buttons>
    <ion-buttons right>
      <button ion-button icon-only>
        <ion-icon  name="md-happy" style="font-size:24px" color=primary></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

app.module.ts

imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp,{
      backButtonText: '',
      tabsPlacement: 'bottom',
      tabsHideOnSubPages:false
    }),
   
  ],
1 Like

The first page on the navigation stack (root page) is the page containing tabs (Dashboard). When you push the Profile page on the navigation stack, it’s show on top of Dashboard and therefor you won’t be able to see the Dashboard page and its tabs anymore.

Each of the tab pages has its own navigation stack:

Each ion-tab is a declarative component for a NavController. Basically, each tab is a NavController. For more information on using navigation controllers take a look at the NavController API Docs.

So if you want to your tabs to remain visible, you have to push your page on top of the navigation stack of one of your tabs. I have not done this before, but I think you first have to get a reference to one of your tabs and then push your Profile page on top of that:

<ion-tabs>
  <ion-tab [root]="tab1Root" #tab1></ion-tab>
  <ion-tab [root]="tab2Root"></ion-tab>
  <ion-tab [root]="tab3Root"></ion-tab>
</ion-tabs>

export class Dashboard {

  @ViewChild('tab1') tab1Ref: Tab;

  profileClicked(event){
    this.tab1Ref.push(Profile);
  }

}