Sidemenu & Tabs Together?

Thanks, I did not see that in the docs. Though when I change the setting to either true or false it still loses the tabs no matter if I use push or setRoot on nav from the sidemenu.

I’m confused. Are these pages that you are navigating to from the sidemenu a detail view of a tab?

Sorry let me explain better. So I made a test app, it is setup as 3 pages. The first is the tabs page and it contains the other pages, Home and List, as tabs. I have added a sidemenu like the one in the conference app to the app template and js with the root of app being set to tabsPage on load.

This seems to work fine at first, I can switch tabs and open the sidemenu etc. The issue comes when I am trying to navigate from the sidemenu, which at the moment should switch tabs to the correct one and display the needed page, which at the moment is nothing but the root page of that tab, though in the future it might be a subpage. At the same time the tabs should never disappear from the bottom, ie it should be a top level element that is on all pages of the app and clicking a tab goes to the last page in open in its nav stack.

Quick visual of current app:
App–>TabsPage—> Home
| ‘’’’’’’’’’’’’’’’’’’’’ |______> List
|___>Sidemenu

EDIT: Ignore the ‘’’ it is for spacing issues

Crude Drawing:

So it’s still a bit hard for me to visualize the flow. Do you have any example markup of how you’re navigating to these pages or maybe a github repo of it?

Yes, I realize that I am not the best at explaining this, sorry. The issue I think just stems from navigating to a tabs root when in the sidemenu (The page that is loaded when you first click a tab).

I am trying to make it so that the root page can be a link in the sidemenu and the app would navigate to that tab. Instead it seems to open the page as if it is a new detail page when using nav.push or as a new page when using nav.setRoot. In both cases the tabbar is missing on that new page.

The other thing I was trying to describe as well was that if the page that was linked in the sidemenu was under tab2 it would select tab2 and goto that page, again without losing the tabbar.

The idea being that the tabbar and sidemenu are ever present ways of navigating around the app.

Again I am likely explaining this badly, sorry.

EDIT: This image, from the iOS conference template, is a good idea of a tabbar on the bottom, even in detail page.
https://github.com/driftyco/ionic-conference-app/raw/master/resources/screenshots/iphone/4.png and is basically what I am getting at in the second part about selecting tab2 and going to that subpage.

Ok so I think I understand now. You want to have some pages inside of tabs and be able to navigate to each of these pages from the sidemenu and continue to show the tabs at the bottom. Correct me if I am still not understanding.

Here is something you could do in this case. I am using the conference app as a base. You can navigate to the main tabs page and pass an index param like this (note that I am using TabsPage, not the root page of the tab) when the user clicks on a menu item:

constructor() {
  this.pages = [
    { title: 'Schedules', component: TabsPage, index: 0, icon: 'calendar', hide: false },
    { title: 'Speakers', component: TabsPage, index: 1, icon: 'person-remove', hide: false },
  ];
}

Then the markup for the menu items:

<button ion-item menuClose *ngFor="#p of pages" (click)="openPage(p)">
  <ion-icon item-left [name]="p.icon"></ion-icon>
  {{p.title}}
</button>

Which calls openPage and passes an index through the params:

openPage(page) {
  let nav = this.app.getComponent('nav');
  nav.setRoot(page.component, {index: page.index});
}

So then in the constructor for the TabsPage you can check for this index param:

constructor(navParams: NavParams) {
  // set the default index to 0, the first tab
  this.myIndex = 0;
  if (navParams.data.index) this.myIndex = navParams.data.index;
}

And finally in the tabs component (TabsPage) you can add the selectedIndex attribute which will change which tab is displayed based on the myIndex variable:

<ion-tabs [selectedIndex]="myIndex">
  <ion-tab [root]="tab1Root" tabTitle="Schedule" tabIcon="calendar"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Speakers" tabIcon="contacts"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Map" tabIcon="map"></ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
</ion-tabs>

Does this solve your problem? If you think it is too complex please create an issue for it and we can discuss this some more: http://ionicframework.com/submit-issue/

4 Likes

That does indeed fix the issue with sidemenu and tabs navigation. Thanks for helping out with that and trying to decipher my posts.

1 Like

Hi Brandy,

The example above is the closest I can find to what I’m after in regards to running Tabs and a Side Menu at once. I wonder if you were able to add any comment to my circumstances below? It would be greatly appreciated.

Using the Conference App as a base, the app would run with the 4 tabs shown at all times. Additionally I want to show more “root” or “top-level” pages in the side menu as well. But they would not be shown in the tabs. Is this possible?

I’ve tried keeping the Conference App as is, adding another “root” page to the side menu and tabs, and then attempted to hide that “root” page on the tabs without luck.

Thank you in advance

Cameron

Thats also what i need and it works pretty well.
Is there a way to check to not open a page if i am coming from the same tab. (sidemenu page == tab page)

I’m not sure that I fully understand but it sounds like you want a page that has the menu, but not the tabs, and also some pages in tabs. Have you tried looking at how the login and signup pages are set up in the conference app? These pages don’t have the tabs but they show in the side menu. Please let me know if I’m misunderstanding you.

Hi Brandy

Thanks for getting back to me.

The login page does not carry the tabs on its page.

What would be terrific , would be a list of 6-7 core pages in the side menu. You could select which 4 core pages are shown in the tabs.

Cameron

1 Like

The ionic-conference-app solution works.

But: calling nav.setRoot() is not desirable in my case. The only reason I need the tabs is for their ability to pre-load all the pages and keep them in memory (for speed, because initialization of some of these pages is heavy in my app). The nav.setRoot() solution destroys and recreates pages on every tab switch, but that’s what I was trying to avoid by using the tabs and their built-in navigation.

Is there a way to use the two together without calling nav.setRoot() - by just selecting tabs as we used to do with, e.g. app.getComponent('nav-tabs').select(1) ?

Right now using @ViewChild as described here

http://learnangular2.com/viewChild/

does not seem to work - it only works with navcontroller, but no other component - when decorating a property for any other component, the property never gets initialized, it remains undefined.

Any help on how to get to select tabs from the app class methods would be greatly appreciated. Thanks.

OK I found a solution that works well for me.

As per Conference App, how can we keep tabs on Login page also?

Is there any way to keep tabs as on demand… because I want to hide tabs on some pages and want to show tabs on some pages…

please help on this…

I have the same problem, where my tabs are disappearing when I select a page from the menu and this solution is not working for me, does the conference app have the complete example for this scenario.

Thank you,
Praveena

Is it possible to navigate directly from the sidemenu to a subpage ?

It is definitely possible to navigate directly from the sidemenu to a subpage:

But is it also possible to keep the tabs displayed?

1 Like

Well i have seen this approach everywhere i googled. But most of the times we need tabs on all pages which are in menus but not in tabs. i,e we need to show tabs on pages which are not in tabs but in menus. I hope you understand my issue please help or share some docs regarding this stuff. As i’m working on a complex app where there are 3-4 tabs but more menus & i need to maintain the tabs on every page.

you can insert tabs in your project by visiting this blog…which i have created for making tabs in ionic 3 project

https://ionic3tabs.blogspot.com/

Hi, I have been using both together for a while and have recently updated a skeleton app that does both sidemenu + tab and has full control, i.e.