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


#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!


#2

A slightly different approach, but much cleaner imo.


#3

BTW kudos on a good question including a git repo example etc…


#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.


Push from ion-tabs to ion-tabs
#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:


#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.