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
}),
],