99% can't solve this!? Creating two tab pages in Ionic (ion-tabs)

Ionic Framework ionic-v3
1

Hi everyone :slight_smile:

TLDR: How do you implement two pages each with with one <ion-tabs> (each containing at least two <ion-tab>s)? The tab names and icons change, the tabs content changes only after clicking on it.

I have a problem for which I struggled to find a solution for. I saw other people post about this too, also to no success. I hope that here someone knows the solution :slight_smile:

First of all for context I uploaded a github repository: https://github.com/janhesters/twotabs.

I want to write an app in Ionic 3 in which I have two pages with <ion-tabs> each containing 4 <ion-tab>s. I wrote two pages called home and hometwo (referred to as basepages). In each html I declared the ion-tabs.
Then I made 4 pages (about, abouttwo, contacts, contactstwo; referred to as tabpages), two of each are in the <ion-tab>s of the each homepage.
Next I made a button on the first homepage that pushes the second home page on to the navCtrl. (I didnā€™t put the button on one of the tab pages, because then the page wouldā€™ve gotten pushed onto that nav, since each tab page seems to have itā€™s own nav https://ionicframework.com/docs/api/components/tabs/Tab/).

Expected behaviour:
The second basepage gets pushed onto the stack and displays the new tabs along with their respective names icons and content.

Observed behaviour:
The second basepage gets pushed onto the stack and displays the new tabs along with their respective names and icons. BUT the content of the pages is the one of the respective tabs of the first basepage. Only after clicking each new tab will the content change.

Does anyone know how to fix this?
(One of my less than good solution ideas, which I couldnā€™t figure out how to do, involved ā€œghost-clickingā€ all the tabs once as soon as the page loadsā€¦ So yeah :frowning: )

Any help would be much appreciated! Thank you!

1 Like
2

A slightly different approach, but much cleaner imo.

3

BTW kudos on a good question including a git repo example etcā€¦

1 Like
4

Hi @judgewest2000. Thank you for your answer! Yeah the approach using segments is my emergency solution, but It would be awesome to get it working using actual tabs (amongst other things, because of icons + words = better UX) :slight_smile:

5

I havnā€™t any problems with pushing a tab page on top of on other one. Even showing a tab page as modal on top is no problem.

But I do nothing special.

try to add

[tabsHideOnSubPages] = ā€œtrueā€

to your <ion-tab> tag

Itā€™s the only difference I can find at the moment.

6

Thank you for your answer @Jacktoolsnet !

So I included it on all the ion-tabs like this:
<ion-tab [tabsHideOnSubPages]=true [root]="tab3Root" tabTitle="NotAbout" tabIcon="home"></ion-tab>

This unfortunately leads to the same observed behaviour / bug for me.

If you got it working, could you upload a working code example to github? That would be awesome.

7

Itā€™s possible that the proper format is

tabsHideOnSubPages=ā€œtrueā€

Sans brackets.
No idea if this could help with your overall problem but Iā€™ve used that property before and believe I wrote it out in that form with success

8

Hi @jaydz thank you for you answer!

No unfortunately the observed behaviour stays the same.

9

Sorry I need a little bit time to extract the relvant code.

4 Likes
10

Hmm yourse seems to be working, but I havenā€™t spotted the differences yet. Thanks for posting though!

11

Tho only difference is in the ion-tab tag in the html-pages.

12

Iā€™ll just accept yours as the answer :slight_smile: My team used the segments approach now tho. But I guess future people can look at your code and use that :slight_smile: GG thank you for your help

13

In that case mark my previous as ā€˜solutionā€™!! :wink:

1 Like
14

I am pretty new to Ionic, so maybe it is nonsense what I write.

As far as I understand the Tabs page it makes sense that the Tabs stay between Sub pages.

For multiple Tab pages, would it not make more sense to have multiple Root pages? One for each Tabs page.

15

Hi @Jacktoolsnet why you have remove the solution.

I have the same problem as @Hesters
Can you give me the solution please ?

16

Upps Sorry.

The link is working again.

17

Your solution works visually right, but navigation stack is messed up.
You add push pages as subpages of the root tabs components. Hiding tabs bar makes illusion of navigating to totally separate page. But in markup we see outer tabs with inner tabs bar. @Hesters, if it was what you were looking for, thatā€™s good.
Maybe you have any solution with correct navigation?