Ion-tabs not in separat file?

Ionic Framework ionic-v3
1

i’m in my app.html and did sth. like this

<ion-tabs>
    <ion-tab [root]="tab1Root" tabTitle="tab1"></ion-tab>
    <ion-tab [root]="tab2Root" tabTitle="tab2"></ion-tab>
</ion-tabs>

<ion-nav id="nav" #content [root]="???" swipeBackEnabled="false"></ion-nav>

Is there a way to achieve the use of a <ion-tabs>-component, which lays in the same html file?
Before I changed it, it worked like a charm - taken from the tabs demo…

I searched this forum alongside some others, however it appers to me, that no one has tried this before (can’t believe it)… or i just took the wrong words :see_no_evil:

i’m just getting started with this stuff, however as far as i understand, this should have been working?!?:

<ion-tabs #mainTabs>
    <ion-tab [root]="tab1Root" tabTitle="tab1"></ion-tab>
    <ion-tab [root]="tab2Root" tabTitle="tab2"></ion-tab>
</ion-tabs>

<ion-nav id="nav" #content [root]="mainTabs" swipeBackEnabled="false"></ion-nav>

thankful to any help with this.

2

It looks like you are using V3, so it should be tagged ionic-v3

The ion-tabs should go to the tabs.html (assuming the tabs page is called tabs) file and the ion-nav to the app.html

3

hi, thx for the quick reply.

ich thought i’m using the latest version (didn’t used the npm to upgrade to latest, but downloaded it only some weeks before). also was a bit confused, when comandline told me it’s CLI 4.0.x and an error in the browser wrote framework is version 3.9.x … however angular seems to be in both the same :man_shrugging:

Anyway - I saw, how it is devided usually. But i still want to know, if it’s possible to use it in the same file…

4

Actually using <ion-tabs>, I think the answer is “no”. The root and each of the tabs are intended to be pages that are loaded by the NavController, not via template reference variables.

What you could probably do is to use Segments, which have a fairly similar UX to tabs. You could then conditionally reveal swaths of elements that all live in the same template based on the active segment. Effectively, you would be reimplementing the content-switching that the framework Tabs component provides.

5

too bad - based on your level of experiance I’d rather have heard something else^^
Since Segments seem not only to be flushing the nav-History (I’m not sure, but I think this problem could be worked around) - they also ailing from the load-content-problem the other way 'round (don’t they? *) - i’ll stick with tabs and use an outsourced file for it 'cause my model aimed to integrate the tabs-control into my app modul while single tabs should have been fetched from files which i was intended to load on demand from other moduls during runtime and this last point is the more important one :slight_smile:

* tabs cannot load by reference variables, segments not from other files … or did i get sth. wrong here?

nevertheless -thx for intorducing segments to me :+1:

EDIT

Also i found this - written by @jgw96 ( Justin Willis ), whom seems to be stuff from ionic team itself - which says that ion-tabs should always be in it’s own file. Since it worked in part but for all that can cause random ‘features’, this matter is closed to me.