Show tabs menu bar in all page. If click on side menu then tabs menu bar is not visible in all pages

Ionic Framework ionic-v3
1

Hi all, I create demo project from ionic 2 conference app GitHub - ionic-team/ionic-conference-app: A conference app built with Ionic to demonstrate Ionic

How to show tabs bar on all pages? In my code it only working on pages which is defined in tabs.
When I add new Page to side menu, and then i click, tabs menu not visible.
If I Click to About2, About3 which is not in tab menu then tabs menu is not visible. I use tabs menu for quick accces to specific pages. So I need have tabs visible for all sites.
All tutorial and blogs use the same page in side menu and tabs menu. I dont find tutorial where is used diffrent side menu with more side menu items like in tabs.

app.component.ts

> export class ConferenceApp {
>   @ViewChild(Nav) nav: Nav;
> 
>   appPages: PageInterface[] = [
>     { title: 'Schedule', name: 'TabsPage', component: TabsPage, tabComponent: SchedulePage, index: 0, icon: 'calendar' },
>     { title: 'Speakers', name: 'TabsPage', component: TabsPage, tabComponent: SpeakerListPage, index: 1, icon: 'contacts' },
>     { title: 'Map', name: 'TabsPage', component: TabsPage, tabComponent: MapPage, index: 2, icon: 'map' },
>     { title: 'About', name: 'TabsPage', component: TabsPage, tabComponent: AboutPage, index: 3, icon: 'information-circle' }
>     { title: 'About2', name: 'TabsPage', component: TabsPage, tabComponent: AboutPage2, index: 4, icon: 'information-circle' }
>     { title: 'About3', name: 'TabsPage', component: TabsPage, tabComponent: AboutPage3, index: 5, icon: 'information-circle' }
>   ];

I try modify function, but this work only for side menu and tabs menu is show only on init of root page. When i use original openPage method, this use index and if is in side menu more items, index overflow

openPage(page: PageInterface) {

this.nav.setRoot(page.tabComponent);
}

tabs.ts

  export class TabsPage {
  // set the root pages for each tab
  tab1Root: any = SchedulePage;
  tab2Root: any = SpeakerListPage;
  tab3Root: any = MapPage;
  mySelectedIndex: number;

  constructor(navParams: NavParams) {
    this.mySelectedIndex = navParams.data.tabIndex || 0;
  }
 }

I try to use tabsHideOnSubPages to set true/false, but not success

The similar problem is defined there, but no solution.
How to show tabs on all pages in my code it only working on selected pages which i add in tabs.ts
ionic2 - Ionic 3 - Enable Tabs on different page - Stack Overflow

1 Like
2

Maybe i find solution

app.componet.ts modify function

openPage(page: PageInterface) {
this.nav.setRoot(TabsPage, {componentFromNavParams.component}); //set tabPage componet and send
…
}

tabs.ts

export class TabsPage {
tabs: any;

constructor(navParams: NavParams, public navCtrl: NavController) {
this.tabs = [
{title: “actual”, root: HomePage, icon: “refresh-circle”},
{title: “Home”, root: HomePage, icon: “home”},
{title: “Schedule”, root: SchedulePage, icon: “paper”},
{title: “Map”, root: MapPage, icon: “map”},
];

let getComponentFromNavPArams = navParams.get('componentFromNavParams');
if (getComponentFromNavPArams != undefined) {
  this.tabs[0].root = getComponentFromNavPArams; //override first tab which set actual page
} else {
  this.tabs[0].root = HomePage; // if no set, then home page
}

}
}

tabs.html
delete mySelectedIndex from ion-tabs, so:

<ion -tabs>
<ion-tab *ngFor=“let tab of tabs” [root]=“tab.root” [tabTitle]=“tab.title” [tabIcon]=“tab.icon”></ion- tab>
</ion -tabs>

One “bug” is that first tab is actual page, but when you call “refresh” it can be “feature” :slight_smile:

3

Hi,

Thanks for your solution, I’m trying to implement it but can you elaborate more on the app.component.ts file? I’m getting an error with componentFromNavParams.component it says “expected :” also, do you keep the remaining things in the function?

openPage(page: PageInterface) {
    let params = {};

    // We don't want the back button to show when any of these pages are clicked
    if (page.index) {
      params = { tabIndex: page.index };
    }

    // If we are already on tabs just change the selected tab don't setRoot again,
    // this maintains the history stack of the tabs even if changing them from the menu
    if (this.nav.getActiveChildNavs().length && page.index != undefined) {
      this.nav.getActiveChildNavs()[0].select(page.index);
    // Set the root of the nav with params if it's a tab index
    } else {
      // navigate to the new page if it is not the current page
      this.nav.setRoot(page.name, params).catch((err: any) => {
        console.log(`Didn't set nav root: ${err}`);
      });
    }
}

Thanks!

4

Maybe use this
app.componet.ts modify function

openPage(page: PageInterface) {
this.nav.setRoot(TabsPage, {componentFromNavParams: page.component});
…
}

5

Hello,someone can achieve that? I m trying to follow these but it doesnt function…I would like to achieve…when user click in menu , the tabs still displaying… can anyone write example clearly please

6

This time I stop developing project in ionic3, maybe new version have diffrent solution for this problem. Core of framework shill not fixed this unfinished feature?

7

maybe use footer

also some trick:
in app.component.ts:

 pages: PageInterface[] = [
    { title: 'HomePage', name: 'TabsControllerPage', component: TabsControllerPage, tabComponent: HomePage, index: 1, icon: 'calendar' },
    { title: 'Sign Out', name: 'SignInPage', component: SignInPage, tabComponent: LoginPage, index: 1, icon: 'contacts' },
    { title: 'My Profile', name: 'TabsControllerPage', component: TabsControllerPage, tabComponent: ProfilePage, index: 3, icon: 'map' }
  ];

openPage(page: PageInterface) {
    let params = {};
    if (page.index) {
      params = { tabIndex: page.index };
    }

    this.nav.setRoot(page.component, params);
  }

in tabscontrollerPage.ts:

myIndex: number;
...
this.myIndex = navParams.data.tabIndex || 1;

in tabscontrollerPage.html:

<ion-tabs tabsPlacement='bottom' [selectedIndex]="1">
    <ion-tab [root]="searchRoot" tabIcon="ios-search-outline"></ion-tab>
    <ion-tab [root]="homeRoot" tabIcon="ios-home-outline"></ion-tab>
    <ion-tab [root]="contactUsRoot" tabIcon="ios-contacts-outline"></ion-tab>
    <ion-tab class="test" [root]="profileRoot" show="false" tabIcon="ios-contacts-outline"></ion-tab>
</ion-tabs>

now i have 3 tabs(search,home,contact us)
like you see the profile page not show in tabs icon but when you click profile from slide menu, tabs still available :smiley:

1 Like
8

You are awesome my friend that f*kng show=“false” is the Valhala xD, 2:54 am now, thank you.

1 Like