Ionic 3 combination tabspage and sidemenu not working

Question

i followed this article to combine sidemenu and Tabs pages.

the app.html has my menu. i have with #nav bind the ion-nav to [Content] of my ion-menu.

in my app.component.ts i have click Events. they set different Tabs pages as root and there is one normal page.

this looks like this:

@ViewChild('nav') nav: NavController;

    public OnInformationClicked(): void {
        this.nav.setRoot("InfoTabsPage");
    }

    public OnManagementClicked(): void {
        this.nav.setRoot("ManagementTabsPage");
    }

//some other Tabs pages

//the normal page
    public OnFaqClicked(): void {
        this.nav.setRoot("FaqPage");
    }

in my tabs pages i'm using [selectedIndex] like this:

<ion-header>
    <ion-navbar>
        <ion-buttons left>
            <button ion-button icon-only menuToggle>
                <ion-icon name="menu"></ion-icon>
            </button>
        </ion-buttons>
    </ion-navbar>
</ion-header>
<ion-tabs [selectedIndex]="0">
    <ion-tab [root]="contactPersonRoot" tabTitle="{{tabs1Name}}" tabIcon="information-circle"></ion-tab>
    <ion-tab [root]="contactSupportRoot" tabTitle="{{tabs2Name}}" tabIcon="information-circle"></ion-tab>
</ion-tabs>

but it is not working.

Problem: when i open my menu and change the tabs pages, i can see, how the tabs changed and the right tab Icon is selected, but the Content over the tabs doesn't changed. if i going to the normal page, this is displayed correctly. if i going to a Tabs page from the normal page, then the Tabs page is displayed correctly. if i'm trying to go back to another tabs page. it doesn't changed all content again.

i tried .... MyTabs.select(0). same issue.

i'm currently tesing with ionic serve.

"ionic-angular": "3.9.2",
"ionicons": "4.1.2",
"@angular/animations": "6.0.3",
"@angular/common": "6.0.3",
"@angular/compiler": "6.0.3",
"@angular/compiler-cli": "6.0.3",
"@angular/core": "6.0.3",
"@angular/forms": "6.0.3",
"@angular/http": "6.0.3",
"@angular/platform-browser": "6.0.3",
"@angular/platform-browser-dynamic": "6.0.3",
"@ionic-native/app-version": "^4.10.0",
"@ionic-native/background-mode": "^4.10.0",
"@ionic-native/camera": "^4.10.0",
"@ionic-native/core": "4.7.0",
"@ionic-native/in-app-browser": "^4.9.1",
"@ionic-native/network": "^4.7.0",
"@ionic-native/splash-screen": "4.7.0",
"@ionic-native/status-bar": "4.7.0",
"@ionic/storage": "^2.1.3",

anyone an idea, what's going wrong?

UPDATE

after try and error coding, changed from [selectedIndex]="0" back to myTabs.select(0) in the .ts file of the tabs page like in the article. this not working. but i made a timeout around like so:

ionViewDidLoad() {

    let _self = this;
        setTimeout(function(){
            _self.tabRef.select(0);
        },100);
}

now i can see, the content over the tabs replaced correctly. but it looks not like a good workaround, because now i see that the old content is loading before the replacement by select. if i open tabspage 2 now, i can see from tabspage 1 is the content behind tab 1 rendered (ionViewDidLoad, ionViewWillEnter... of tab 1 is executing). then after selecting is done, tab 1 of tabspage 2 is rendering.

UPDATE 2

app.html:

<ion-menu [content]="nav">
    <ion-header>
        <ion-toolbar>
            <ion-title>{{menuTitle}}</ion-title>
        </ion-toolbar>
    </ion-header>
    <ion-content>
        <ion-list>
            <button ion-item (click)="OnInformationClicked()">
                <ion-icon name="information" item-start color="primary"></ion-icon>
                <ion-label>Info</ion-label>
            </button>
            <button ion-item (click)="OnManagementClicked()">
                <ion-icon name="build" item-start color="primary"></ion-icon>
                <ion-label>Manage</ion-label>
            </button>
            <button ion-item (click)="OnRealisationClicked()">
                <ion-icon name="clipboard" item-start color="primary"></ion-icon>
                <ion-label>Real</ion-label>
            </button>
            <button ion-item (click)="OnContactClicked()">
                <ion-icon name="contact" item-start color="primary"></ion-icon>
                <ion-label>Contact</ion-label>
            </button>
            <button ion-item (click)="OnFaqClicked()">
                <ion-icon name="help" item-start color="primary"></ion-icon>
                <ion-label>FAQ</ion-label>
            </button>
            <button ion-item (click)="OnLogoutClicked()">
                <ion-icon name="log-out" item-start color="primary"></ion-icon>
                <ion-label>Logout</ion-label>
            </button>
        </ion-list>
    </ion-content>
</ion-menu>

<ion-nav [root]="rootPage" #nav [swipeBackEnabled]="false"></ion-nav>

app.component.ts

@Component({
    templateUrl: 'app.html'
})
export class MyApp {

    @ViewChild('nav') nav: NavController;

    public menuTitle: string = GlobalHelper.GetResources().Application.Menu.Menu;


    rootPage: any = HomePage;

    constructor(private _css: ClientServerProvider, platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen,
        private _backgroundMode: BackgroundMode, private _appProvider: AppProvider) {

        platform.ready().then(() => {
            // Okay, so the platform is ready and our plugins are available.
            // Here you can do any higher level native things you might need.
            statusBar.styleDefault();
            splashScreen.hide();

            _backgroundMode.enable();
        });
    }


    public OnInformationClicked(): void {
        this.nav.setRoot("InfoTabsPage");
    }

    public OnManagementClicked(): void {
        this.nav.setRoot("ManagementTabsPage");
    }

    public OnRealisationClicked(): void {
        this.nav.setRoot("RealisationTabsPage");
    }

    public OnContactClicked(): void {
        this.nav.setRoot("ContactTabsPage");
    }

    public OnFaqClicked(): void {
        this.nav.setRoot("FaqPage");
    }

    public OnLogoutClicked(): void {

        this._css.Logout().then(loggedOut => {
            if (loggedOut) {
                this._appProvider.InitApplication();
            }
        });
    }
}

for example one of the Tabs pages (the others are like this):

<ion-header>
    <ion-navbar>
        <ion-buttons left>
            <button ion-button icon-only menuToggle>
                <ion-icon name="menu"></ion-icon>
            </button>
        </ion-buttons>
    </ion-navbar>
</ion-header>
<ion-tabs #myTabs>
    <ion-tab [root]="preparationRoot" tabTitle="{{tabs1Name}}" tabIcon="browsers"></ion-tab>
    <ion-tab [root]="processRoot" tabTitle="{{tabs2Name}}" tabIcon="logo-buffer"></ion-tab>
    <ion-tab [root]="complaintRoot" tabTitle="{{tabs3Name}}" tabIcon="bulb"></ion-tab>
</ion-tabs>

import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, MenuController, Tabs } from 'ionic-angular';
import { GlobalHelper } from '../../../../helper/globalHelper';

@IonicPage()
@Component({
    selector: 'page-realisation-tabs',
    templateUrl: 'realisation-tabs.html'
})
export class RealisationTabsPage {

    @ViewChild('myTabs') tabRef: Tabs;

    preparationRoot = 'PreparationPage';
    processRoot = 'ProcessPage';
    complaintRoot = 'ComplaintPage';

    tabs1Name = GlobalHelper.GetResources().Application.Features.Realization.Preperation_Page_Header;
    tabs2Name = GlobalHelper.GetResources().Application.Features.Realization.Process_Page_Header;
    tabs3Name = GlobalHelper.GetResources().Application.Features.Realization.Complaint_Page_Header;

    constructor(public menuCtrl: MenuController, public navCtrl: NavController) {

    }


    ionViewDidLoad() {

      // after OnRealisationClicked

       /*
        * 
        * with this workaround, Tabs changed, content (subpage) changed, correct * tab is active, but before the subpage changed to correct one, the previous 
* subpage is loading , nearly the result of the guide in the article

        let _self = this;
        setTimeout(function () {
            _self.tabRef.select(0);
        }, 100);*/

          // this is the variant of the article, without timeout
         //only Tabs are changed and the correct tab Icon is active and selected
         // but content (subpage) is not changed, it is still the first subpage 
//of the previous tabspage
         this.tabRef.select(0);
    }
}

Workflow (without the timeout workaround):

1. after Login HomePage as root is replaced with RealisationTabsPage, Tab 1 subpage (preparation) is loaded
2. open Menu Click on a menu Point, which open another Tabs page, for example contacttabspage
3. Tabs of the contacttabspage are loaded. tab 1 of this Tabs is selected and active. but the subpage behind tab 1 of contacttabspage is still the subpage from realisationtabspage (preparation).
4. now i'm open menu and going to a None Tabs page (FAQ). FAQ is correctly rendered.
5. open menu: i'm going to a Tabs page, never mind which Tabs page (Realization, contact, info, mangement...), Tabs page rendered correctly.
6. now i'm going from this tabspage to another tabspage , so there is the issue again. i'm see the previous subpage of the previous tabspage.

if i'm using instead of using the select() function there is the same issue.

Answer 1

Made this working example of sidemenu+tabs.Hope it helps you.

https://stackblitz.com/edit/ionic-hmkkwc

Answer 2

I had a similar problem. Assign the pages directly to the tab variables instead of the string representation (page names) AND give the tab container unique ids. That worked for me.