# How to select tabs dynamically from sidemenu

**URL:** <https://forum.ionicframework.com/t/how-to-select-tabs-dynamically-from-sidemenu/122680>\
**Category:** ionic-v3\
**Created:** [February 26, 2018, 11:34am UTC](https://forum.ionicframework.com/t/how-to-select-tabs-dynamically-from-sidemenu/122680 "2018-02-26T11:34:20Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![themarsbeing](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/themarsbeing/32/109099_2.png) [@themarsbeing](https://forum.ionicframework.com/u/themarsbeing)\
**Post date:** [February 26, 2018, 11:34am UTC](https://forum.ionicframework.com/t/how-to-select-tabs-dynamically-from-sidemenu/122680/1 "2018-02-26T11:34:20Z")

</div>

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

 ![maintab](https://global.discourse-cdn.com/ionicframework/original/3X/6/f/6f5f549dafdd9cd3a626e4379b5d3059b9911110.JPG)

This is the code for Main tabs page:

```auto
    <ion-header>
        <ion-navbar #content color="black">
            <button ion-button menuToggle>
              <ion-icon name="menu"></ion-icon>
            </button>
            <ion-title >Main Tab</ion-title>
          </ion-navbar>
    </ion-header>
<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>
</ion-tabs>

```

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

This is how my side menu looks like.

![tabmenu](https://global.discourse-cdn.com/ionicframework/original/3X/9/7/97b1b13b36ebfbb3e8d04c8740a4b0e121e0b37e.JPG)

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

```auto
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';

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

    // 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.
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

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

```

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});`

---

<div class="post-metadata">

**Author:** ![jamesnurse](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jamesnurse/32/117087_2.png) [@jamesnurse](https://forum.ionicframework.com/u/jamesnurse)\
**Post date:** [February 26, 2018, 11:48am UTC](https://forum.ionicframework.com/t/how-to-select-tabs-dynamically-from-sidemenu/122680/2 "2018-02-26T11:48:49Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![themarsbeing](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/themarsbeing/32/109099_2.png) [@themarsbeing](https://forum.ionicframework.com/u/themarsbeing)\
**Post date:** [February 26, 2018, 11:50am UTC](https://forum.ionicframework.com/t/how-to-select-tabs-dynamically-from-sidemenu/122680/3 "2018-02-26T11:50:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jamesnurse](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jamesnurse/32/117087_2.png) [@jamesnurse](https://forum.ionicframework.com/u/jamesnurse)\
**Post date:** [February 26, 2018, 11:54am UTC](https://forum.ionicframework.com/t/how-to-select-tabs-dynamically-from-sidemenu/122680/4 "2018-02-26T11:54:02Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![themarsbeing](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/themarsbeing/32/109099_2.png) [@themarsbeing](https://forum.ionicframework.com/u/themarsbeing)\
**Post date:** [February 26, 2018, 11:55am UTC](https://forum.ionicframework.com/t/how-to-select-tabs-dynamically-from-sidemenu/122680/5 "2018-02-26T11:55:58Z")

</div>

I’m working on it.

Saw this [artcile](https://devdactic.com/ionic-side-menu-tabs/)  
Something similar to what I’m looking for but that tutorial is old. Some of the things used have been deprecated.

---

<div class="post-metadata">

**Author:** ![jamesnurse](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jamesnurse/32/117087_2.png) [@jamesnurse](https://forum.ionicframework.com/u/jamesnurse)\
**Post date:** [February 26, 2018, 11:58am UTC](https://forum.ionicframework.com/t/how-to-select-tabs-dynamically-from-sidemenu/122680/6 "2018-02-26T11:58:19Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 9:48pm UTC](https://forum.ionicframework.com/t/how-to-select-tabs-dynamically-from-sidemenu/122680/7 "2021-07-19T21:48:49Z")

</div>