CODEWITHSUNDEEP
ionic-frameworkionic2tabsionic3
J. Hesters
J. Hesters

Reputation: 14768

Implementing two tab pages (each containing one ion-tabs) in one app in Ionic 3

Summary

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.

Detail

I have a problem for which I struggled to find a solution for. I saw other people post about this two, also to no success.

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.

How can I 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).

Upvotes: 0

Views: 2212

Answers (3)

J. Hesters
J. Hesters

Reputation: 14768

The answer has been (sorta) provided on the Ionic forum https://forum.ionicframework.com/t/99-cant-solve-this-creating-two-tab-pages-in-ionic-ion-tabs/118477/12

Enjoy :)

Upvotes: 0

Tarik Merabet
Tarik Merabet

Reputation: 70

The only solution I found yet is to have conditionnal ion-tabs in tabs.html:

<ion-tabs id="locTabs" *ngIf="user && user.typeProfil == 'loc'">
    <ion-tab [root]="annonce" tabTitle="Annonces" tabIcon="home"></ion-tab>
    <ion-tab [root]="chat" tabTitle="Message" tabIcon="chatbubbles" [tabBadge]="nbUnread"></ion-tab>
    <ion-tab [root]="agenda" tabTitle="Agenda" tabIcon="calendar"></ion-tab>
    <ion-tab [root]="docs" tabTitle="Documents" tabIcon="document"></ion-tab>
    <ion-tab [root]="userForm" tabTitle="Profil" tabIcon="person"></ion-tab>
</ion-tabs>

<ion-tabs id="proTabs" *ngIf="user && user.typeProfil != 'loc'">
    <ion-tab [root]="annoncePro" tabTitle="Annonces" tabIcon="home"></ion-tab>  
    <ion-tab [root]="chat" tabTitle="Message" tabIcon="chatbubbles" [tabBadge]="nbUnread"></ion-tab>
    <ion-tab [root]="agenda" tabTitle="Agenda" tabIcon="calendar"></ion-tab>
    <ion-tab [root]="docsPro" tabTitle="Documents" tabIcon="document"></ion-tab>
    <ion-tab [root]="userForm" tabTitle="Profil" tabIcon="person"></ion-tab>
</ion-tabs>

Upvotes: 0

Charles Zhao
Charles Zhao

Reputation: 186

I didn't check your source code, but I thought this may work. Can you please try the root nav real quick?

import { App } from 'ionic-angular';

...

constructor(app: App) { ... }

Then use the following code instead of navCtrl.push()

this.app.getRootNav().push(HomeTwoPage)

Upvotes: 0

Related Questions