How to select tabs dynamically from sidemenu

I created a sidemenu app in Ionic 2 which contains a Main Tab and 3 sub tab pages. It looks like this:

This is the code for Main tabs page:

        <ion-navbar #content color="black">
            <button ion-button menuToggle>
              <ion-icon name="menu"></ion-icon>
            <ion-title >Main Tab</ion-title>
<ion-tabs [selectedIndex]="mySelectedIndex" #myTabs>
    <ion-tab [root]="tabARoot" tabTitle="Tab A" tabIcon="information-circle"></ion-tab>
    <ion-tab [root]="tabBRoot" tabTitle="Tab B" tabIcon="information-circle"></ion-tab>
    <ion-tab [root]="tabCRoot" tabTitle="Tab C" tabIcon="information-circle"></ion-tab>

It contains 3 sub tab pages with some gibberish on it.

This is how my side menu looks like.


So when a user clicks on Tab B link from side menu, he should navigate to main tabs page with Tab B as selected. But now when I click, Tab A is selected by default.

Is it possible to change this behavior?

My app.component.ts file looks like this

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform, App, Tabs } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { MainPage } from '../pages/main/main';

  templateUrl: 'app.html'
export class MyApp {
  @ViewChild(Nav) nav: Nav;
  rootPage: any = MainPage;
  pages: Array<{title: string, component: any}>;

  constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen, private app: App) {

    // used for an example of ngFor and navigation
    this.pages = [
      { title: 'Tab A', component: MainPage },
      { title: 'Tab B', component: MainPage },
      { title: 'Tab C', component: MainPage },

  initializeApp() {
    this.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.

  openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario

From somewhere I got a solution which didn’t work, obviously. in that solution, it was mentioned to do it like given below but it didn’t work’

this.nav.setRoot(page.component, {tabIndex: 2});

I wouldn’t mess with the rootPages for this, as you’d get into a world of hurt. Instead get the callback for the sidemenu picker todo a select method on the main pages tabs list with the same index.

You’ve got Plan B? I didn’t see any good solutions for this problem.

Plan A - Rootpages - Yours
Plan B - Use select as callbacks
Plan C - Fix the current Ionic bug, using 2 way binding to keep scope of selected tab
Plan D - Leave on forums for longer, I’m sure someone will come up with it!

I’m working on it.

Saw this artcile
Something similar to what I’m looking for but that tutorial is old. Some of the things used have been deprecated.

Looks like plan E, work-around Ionic functionality, by using 2 way data binding to hold scope of page. Nice solution and the core functionality obviously isn’t deprecated, just need to probably listen on different lifecycle events.