import { Component } from ‘@angular/core’;
import { Page1 } from ‘…/page1/page1’;
import { Page2 } from ‘…/page2/page2’;
import { CartPage } from ‘…/cart/cart’;
@Component({
templateUrl: ‘tabs.html’
})
export class TabsPage {
// this tells the tabs component which Pages
// should be each tab’s root Page
tab1Root: any = Page1;
tab2Root: any = Page2;
tab3Root: any = CartPage;
constructor() {
}
}
I’m not sure of what you expect but did you create the tabs in your home.html ? and put this part of code in the home.ts ?
home.html :
<ion-content padding> <ion-tabs tabsPlacement="bottom"> <ion-tab tabIcon="contact" [root]="tab1"></ion-tab> <ion-tab tabIcon="paw" [root]="tab2"></ion-tab> <ion-tab tabIcon="analytics" [root]="tab3"></ion-tab> <ion-tab tabIcon="navigate" [root]="tab4"></ion-tab> </ion-tabs> </ion-content>
home.ts :
@Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { tab1:any = Profile; tab2:any = AboutUs; tab3:any = Analytics; tab4:any = Location;
Thanks for replay
but my problem is that i am using sidemenu and tabs together and i defime tabsPage as root page and add only 4 pages in tabspage when i open side menu and open any page tabs gone disappear. i want tabs on all sidemenu pages also please look attached images
Hello,
I met the same “problem” there is my analysis.
Did you put the tabs code on the main page ? If you open new page for each side menu option, you should probably add the tabs in all the pages to have it. If you use the inspector on your browser you should probably see the tabs menu behind the page shown.
I also have same issue…
when we push page from tabs page it’s shows tabs on next page but when we push page from side menu, tabs disappear…
BUMP!
I have been searching this problem for a while now…
There is an app setting for tabsHideOnSubPages you can add to the ionicBootsrap function in app.module.ts
did you find solution for this ???
same issue here…? have any one found solution?
I have found temparary solution, dont know its right or wrong but its working
in app.module.ts add links with segment
IonicModule.forRoot(ConferenceApp, {mode: 'md',tabsHideOnSubPages: 'false'}, {
links: [
{ component: TabsPage, name: 'TabsPage', segment: 'tabs' },
{ component: DashboardPage, name: 'DashboardPage', segment: 'home' },
{ component: ServiceSearchPage, name: 'ServiceSearchPage', segment: 'serviceSearch/:session'},
in app.template.html (In side menu) put direct link of view
<a href="#/tabs/home/home" class="btn btn-primary" menuClose >Dashbord</a>
<a href="#/tabs/serviceSearch/bus" class="btn btn-primary" menuClose >Bus</a>
<a href="#/tabs/serviceSearch/car" class="btn btn-primary" menuClose >Car</a>
you can implement above url in array by adding in app.componant.ts
menuLinks: any =[
{ component: DashboardPage, name: 'Home', uri: 'home/home' },
{ component: ServiceSearchPage, name: 'Bus', uri: 'home/serviceSearch/bus'},
{ component: ServiceSearchPage, name: 'Car', uri: 'home/serviceSearch/car'},
<div *ngFor="let p of menuLinks; let i=index" >
<a href="#/tabs/{{p.uri}}" class="btn btn-primary" menuClose >{{p.name}}</a>
</div>
though one issue there ,its for cache issue & its for all regardless you use this or not.
just have look at it & let me know if anyone have any fix to that.
did any one solved this problem?
I made 2 work around to implement this situation 1 worked and other not
the normal was is to link all menu pages to Tabs and pass index of the tab you want to open
and in Tabs add all pages of menu and what u dont like to show it tabs make tab option show=‘false’.
but this solution work with some and others not … show ='false ’ remove the tab itself
…
the other solution i made worked but haveee some rewriting on code and some issue .
it is to implement new component with icons to look like tabs and this compoenent add it into footer of app.html
it will be statically shown in all pages …
u can add event to page that u want to hide to on it