how do i show the ion-nav in the next push/ page or when i set new root?
Can you please share what you have for code?
Weāre not really able to help if we donāt have any code.
hi @mhartington, i want my category details to have the tab also, but ion-tabs disappear when it pushes to the category details page.
category page: (category.ts)
import {Page, NavController, NavParams} from 'ionic-angular';
import {CategoryDetailsPage} from '../category-details/category-details';
import {Woocommerce} from '../../providers/woocommerce/woocommerce';
import {MytabsPage} from '../mytabs/mytabs';
@Page({
templateUrl: 'build/pages/category/category.html',
providers: [Woocommerce]
})
export class CategoryPage {
constructor(
nav: NavController,
navParams: NavParams,
woo: Woocommerce){
this.nav = nav;
this.woo = woo;
}
categoryDetails(page){
this.nav.push(CategoryDetailsPage, {
item: page
});
}
}
Category details page (category-details.ts)
import {Page, NavController, NavParams} from 'ionic-angular';
import {ProductDetailPage} from '../product-detail/product-detail';
import {Woocommerce} from '../../providers/woocommerce/woocommerce';
import {MytabsPage} from '../mytabs/mytabs';
@Page({
templateUrl: 'build/pages/category-details/category-details.html',
providers: [Woocommerce]
})
export class CategoryDetailsPage {
categorydata:any;
constructor(
nav: NavController,
navParams: NavParams,
woo: Woocommerce ){
this.woo = woo;
this.nav = nav;
this.navParams = navParams;
this.selectedItem = navParams.get('tabIndex');
this.categorydata = navParams.get('item');
this.catalogname = this.categorydata.name;
}
}
mytabs page (mytabs.ts)
import {Page,NavParams} from 'ionic-angular';
import {MyaccountPage} from '../myaccount/myaccount';
import {HomePage} from '../home/home';
import {CartPage} from '../cart/cart';
import {CategoryPage} from '../category/category';
import {CategoryDetailsPage} from '../category-details/category-details';
import {ProductDetailPage} from '../product-detail/product-detail';
@Page({
templateUrl: 'build/pages/mytabs/mytabs.html'
})
export class MytabsPage {
tab1Root: any = MyaccountPage;
tab2Root: any = HomePage;
tab3Root: any = CartPage;
tab4Root: any = CategoryPage;
tab5Root: any = CategoryDetailsPage;
mySelectedIndex: number;
constructor(public navParams: NavParams) {
this.mySelectedIndex = navParams.data.tabIndex || 0;
//console.log( this.mySelectedIndex );
this.tab1Root = MyaccountPage;
this.tab2Root = HomePage;
this.tab3Root = CartPage;
this.tab4Root = CategoryPage;
this.tab5Root = CategoryDetailsPage;
}
}
mytabs.html
<ion-tabs class="myTabs" [selectedIndex]="mySelectedIndex">
<ion-tab [root]="tab1Root" tabTitle="Me" tabIcon="ios-contact"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="Home" tabIcon="ios-home"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="Cart" tabIcon="ios-cart"></ion-tab>
<ion-tab [root]="tab4Root" tabTitle="Category" tabIcon="list"></ion-tab>
</ion-tabs>I just changed from Beta 4 to Beta 6 and now I am facing the same problem. Changing to a tab detail page via nav.push makes the tabbar disappear, returning to the the tab main page makes the tabbar being shown again.
I had the same issue and all you need to do is add the ātabSubPagesā setting to the config of your app.
@App({
template: '<ion-nav [root]="rootPage"></ion-nav>',
config: {
mode: "ios",
tabSubPages: false
})
Iām also forcing the app to be in ios mode which was something else that changed from beta 5 to 6. When viewing in Chrome, it was using the Material Design mode as itās default.
Thank You for your helpful answer. This was the missing information, now the tabbar is there again 
can you also tell any way how to hide the tabs when we scroll downā¦?
My tabs/pages are using the same pattern as @JosephMendez. I applied the solution as best I understand it as described herein and from the config section in the Ionic docs: https://ionicframework.com/docs/v2/api/config/Config/
To be clear, in my app.module.ts:
@NgModule({
ā¦
imports: [
IonicModule.forRoot(MyApp, {
tabsHideOnSubPages:false,
swipeBackEnabled: true
})
],
ā¦
})
Still, when I go to a details (child) page, the tabs disappear. Itās been several months and Ionic2 has changed so I think something has been lost since then. The example from May shows @App for placement where app.module.ts now has @NgModule (I think these are the same?!?) and the pages/components were @Page and are now @Component.
How do I keep the tabs page available on child screens. Thank you.
Just in case this may help you, I had exactly the same problem (tabs disappearing when changing page) on Ionic 2 (Release).
I found that my css for the tabs in variables.scss were incorrect. Once changing them to the proper values stated in https://ionicframework.com/docs/v2/api/components/tabs/Tabs/ it worked fine. I didnāt have to set the ātabsHideOnSubPagesā neither.
You made my day! It works for my codes.
i have the same problem, someone resolved that ? i work i ionic 3.2.4