How can I navigate to another set of tabs?

Ionic Framework ionic-v3
1

I would like the ability to load a different set of tabs. I see nothing in the following tab specification, on how to tell that the second tab “Reports” could be another set of tabs and that perhaps the coder wants the second set of tabs to be “pushed” rather than just a tab with a page activated.

TabsSet1.html looks like this:

<ion-tabs  #Tabs [selectedIndex]="0" preloadTabs="true">
   
  <ion-tab [root]="RequestsRoot" tabTitle="Requests" tabIcon="apps"></ion-tab>
  <ion-tab [root]="ReportsRoot" tabTitle="Reports" tabIcon="stats"></ion-tab>
  <ion-tab [root]="UserOptionsRoot" tabTitle="Settings" tabIcon="settings"></ion-tab>

</ion-tabs>

TabsSet2.html looks like this:

<ion-tabs  #Tabs [selectedIndex]="0" preloadTabs="true">
   
  <ion-tab [root]="Report1Root" tabTitle="Report 1" tabIcon="people"></ion-tab>
  <ion-tab [root]="Report2Root" tabTitle="Report 2" tabIcon="document"></ion-tab>
  <ion-tab [root]="Report3Root" tabTitle="Report 3" tabIcon="pie"></ion-tab>

</ion-tabs>

in TabsSet2.ts constructor I set the following:

this.Report1Root = Report1Page;
this.Report2Root = Report2Page;
this.Report3Root = Report3Page;

in TabsSet1.ts I set this.ReportsRoot = TabsSet2 and
I do get the default tab of TabsSet2 thus the page Report1Page activated and displayed but the tabs and icons remain the same, that is the 1st set of tabs specified in TabsSet1.html remain in view except for tab2, tab1 and tab3 still point and activate “Requests” and “Settings” respectively.

I have also tried having ReportsRoot be a temporary ordinary page which then via setTimeout 10ms, attempts to do setRoot( TabsSet2 ) but without success, the first tabs (icons/labels) defined in TabsSet1 remain in view.

To summarize, the desired effect would be, for example, select the second tab and a new set of tabs/icons appears. The coder should have the ability to specify statically or control programmatically if they are being pushed and thus a “back arrow” would appear on the top left in the navigation bar (much like pushing a page) This will give a cue to the users that they can back out of the “Reports” tabs.

Thanks for any help.

2

You can use Ion-segment in your tab-page.
ion-segment is tab menu… but it will use div instead of several html pages.

I think you can use four ion-segment tab menu divs per each html page.

3

Thanks for suggesting ion-segment I used them in a different app as per the documentation to provide a filter for items in the same list.

As a side note, I feel both ion-segment and ion-tab suffer from the lack of handling how the UI is expected to behave when a larger number than 3 or 4 of segments/tabs are present. After all you can fit more of them in a landscape orientation. Nothing is mentioned doc-wise as to what happens when you have say 8 of them? Will the framework display ellipses (…) or what?

Also segments don’t seem to support an image (icon) while an icon alone is not always obvious, text-alone is really annoying and reminds me of the poor UX I see on current iPhones (simply too much text alone even for the simple buttons/prompts/choices like "add to exist contact, create new contact, done, cancel, stop, etc…).

My original struggle, stemming from my continuous (recurring) lack of understanding all of these frameworks, is that I was trying to setRoot via the tab’s NavController something like this…

export class ReportsPage {
    constructor(
        private NavController: NavController,
        private App: App,
     )
    {
            // this.NavController.parent.setRoot(ReportsTabs); 
            // this.NavController.setRoot(ReportsTabs) ;
            // this.NavController.setRoot(ReportsTabs,{tab: 2}) ;
            // this.NavController.parent.setRoot(ReportsTabs,{}, {animate: true, direction: 'forward'});
}

Last night I finally got a clue that I needed to reach to the app root NavController. I have now arrived at a kludge which is still incomplete in terms of allowing the users to back out of the reports and onto the main home tabs. The kludge also uses a temp page ReportsPage to setRoot, Ideally I don’t need it and don’t want it.

this.App.getRootNav().push(ReportsTabs);  // this WORKS, well kinda :)

Here is the plunker


Check it out…

One would think that .parent would be the way to access which ever parent NavController a tab’s NavController is attached to, but I don’t understand what .parent mean anymore :slightly_smiling_face:

I know sir @rapropos will chew me for reaching out to App and even more so for me not use camelCasing, but if he or other guru would be willing to provide me with a snippet of code, especially if it uses “Observables” or similar stuff I will take it wholeheartedly and paste it into my app.

4

Actually, the best method is using Angular 5 tabs and style it using CSS3:
Check how you can make your angular 5 tab using *ngIf directive. It’s working so well without any problem.

https://forum.ionicframework.com/t/angular-5-tabs-for-ionic/?source_topic_id=117755

I think the same. Ionic Ui is buggy and slow besides alert box, loading modal and a few others.

I rely on Angular 5 components and style them using CSS3 by myself.
Angular 5 has fewer bugs and it’s generally faster than Ionic UI. Angular 5 will work on both iOS, Android.
There’s no limit in number of angular tabs you can create per a page. Angular’s logic is superior. I have concluded Ionic UI is too slow to use in many occasions. I prefer Angular 5 & CSS3 combo over Ionic UI template… I think all real developers should use custom made angular 5 & css3 components.

Conclusion: abandon Ionic tabs and transplant everything into your new Angular 5 tab divs and style them by yourself.

1 Like
5

Thanks for point it Angular 5 tabs, I will check it out more thoroughly. I rather not have nested tabs visually but a simple “back arrow” like in the default ionic push also as shown in my plunker after I prefixed with the tabs specification with a header/nav in ReportsTabs.html
I think “back arrow” is what is expected at least on Android/iOS and browser too.

If you know how to make that kind of navigation please share a plunker/codepen.
I come from the dark ages of C# .NET XML and Microsoft loads of garbage, I struggle very much with TypeScript (probably because of JS underlying stuff promises, observables, etc…) CSS, nodes.js, cordova, etc…

Also it was not clear what I needed to do to use Angular5 Tabs with I guess my current Ionic3 configuration?

$ ionic info

cli packages: (C:\Users\AXM\AppData\Roaming\npm\node_modules)

    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : 8.0.0

local packages:

    @ionic/app-scripts : 3.1.6
    Cordova Platforms  : browser 5.0.3
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 25.2.5
    Node              : v7.2.0
    npm               : 4.0.5
    OS                : Windows 7

Environment Variables:

    ANDROID_HOME : C:/Users/AXM/AppData/Local/Android/android-sdk

Misc:

    backend : pro

Thanks for taking the time.

6

Angular 5 tab is div tabs which you can customize in any way. Ionic tab comes with restricted behavior because it needs an HTML file per a page.

Angular 5 tab uses div as a page and you can style it in any way you want using CSS3.
You can add back arrow button as well… and then add fade out CSS3 or angular animations.
Try to build one angular 5 tab and see how it behaves compared to Ionic tab which needs three html files.

For back arrow, you can add a header inside angular tab div file and use FontAwesome or Ionicon back arrow and then add close function on that button.

You may want to study CSS3 styles more… I recommend videos on this page to learn how to build your own CSS3 UI:
https://forum.ionicframework.com/t/power-of-css3-ui-design/?source_topic_id=117755

1 Like