ionic 2/3: How to select tabs dynamically

Question

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-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.

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

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

Sathyajith · Answer 1 · 2018-02-26T12:39:39.503

1

There is a property called selectedIndex in ion-tabs component to set the default tab. Since you are passing tabIndex while clicking the main tab you can do something like this

In the controller

selectedTabIndex = navParams.get('tabIndex');

In the view

<ion-tabs [selectedIndex]="selectedTabIndex">
 <ion-tab [root]="tabA"></ion-tab>
 <ion-tab [root]="tabB"></ion-tab>
 <ion-tab [root]="tabC"></ion-tab>
</ion-tabs>

Else if you want to select any tabs programatically from controller you can do this, first get the reference of your tabs and then you can use the select() function to set the selected tab you want by passing the index

@ViewChild('myTabs') tabRef: Tabs;


ionViewDidLoad() {
    this.tabRef.select(1, { animate: false });
}

edited Feb 26 '18 at 12:39

answered Feb 26 '18 at 11:42

Sathyajith

3,836
3
15
28

Actually where you are assigning mySelectedIndex value in your code? – Sathyajith Feb 26 '18 at 11:58
In ionViewWillEnter() @SAJ – Smokey Feb 26 '18 at 12:00
I have updated the answer with how to change tab programatically from controller itself. – Sathyajith Feb 26 '18 at 12:09
Can you try setting the mySelectedIndex variable in constructor instead of in ionViewWillEnter. – Sathyajith Feb 26 '18 at 12:23
ERROR TypeError: Cannot read property 'select' of undefined. I got this error – Smokey Feb 26 '18 at 12:28
Make sure the @ViewChild('myTabs') name is correct in both html and controller and also this.tabRef.select should be called from ionViewDidLoad() as it requires the UI to be populated completely to get the reference of tabs component in controller. – Sathyajith Feb 26 '18 at 12:38

AddWeb Solution Pvt Ltd · Answer 2 · 2018-02-26T12:42:15.030

@john Doe

set root page = 'MenuPage' page

rootPage = 'MenuPage'

try below code: ` src/pages/menu/menu.html :

<ion-menu [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <button ion-item menuClose *ngFor="let p of pages" (click)="openPage(p)">
          <ion-icon item-start [name]="p.icon" [color]="isActive(p)"></ion-icon>
          {{ p.title }}
        </button>
    </ion-list>
  </ion-content>
</ion-menu>

<!-- main navigation -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

src/pages/menu/menu.ts:

import { Tab2Page } from './../tab2/tab2';
import { Tab1Page } from './../tab1/tab1';
import { TabsPage } from './../tabs/tabs';
import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, Nav } from 'ionic-angular';

export interface PageInterface {
  title: string;
  pageName: string;
  tabComponent?: any;
  index?: number;
  icon: string;
}

@IonicPage()
@Component({
  selector: 'page-menu',
  templateUrl: 'menu.html',
})
export class MenuPage {
  // Basic root for our content view
  rootPage = 'TabsPage';

  // Reference to the app's root nav
  @ViewChild(Nav) nav: Nav;

  pages: PageInterface[] = [
    { title: 'Tab 1', pageName: 'TabsPage', tabComponent: 'Tab1Page', index: 0, icon: 'home' },
    { title: 'Tab 2', pageName: 'TabsPage', tabComponent: 'Tab2Page', index: 1, icon: 'contacts' },
    { title: 'Special', pageName: 'SpecialPage', icon: 'shuffle' },
  ];

  constructor(public navCtrl: NavController) { }

  openPage(page: PageInterface) {
    let params = {};

    // The index is equal to the order of our tabs inside tabs.ts
    if (page.index) {
      params = { tabIndex: page.index };
    }

    // The active child nav is our Tabs Navigation
    if (this.nav.getActiveChildNav() && page.index != undefined) {
      this.nav.getActiveChildNav().select(page.index);
    } else {
      // Tabs are not active, so reset the root page 
      // In this case: moving to or from SpecialPage
      this.nav.setRoot(page.pageName, params);
    }
  }

  isActive(page: PageInterface) {
    // Again the Tabs Navigation
    let childNav = this.nav.getActiveChildNav();

    if (childNav) {
      if (childNav.getSelected() && childNav.getSelected().root === page.tabComponent) {
        return 'primary';
      }
      return;
    }

    // Fallback needed when there is no active childnav (tabs not active)
    if (this.nav.getActive() && this.nav.getActive().name === page.pageName) {
      return 'primary';
    }
    return;
  }

}

src/pages/tabs/tabs.html

<ion-tabs [selectedIndex]="myIndex">
  <ion-tab [root]="tab1Root" tabTitle="Tab 1" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Tab 2" tabIcon="contacts"></ion-tab>
</ion-tabs>

src/pages/tabs/tabs.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

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

  tab1Root: any = 'Tab1Page';
  tab2Root: any = 'Tab2Page';
  myIndex: number;

  constructor(navParams: NavParams) {
    // Set the active tab based on the passed index from menu.ts
    this.myIndex = navParams.data.tabIndex || 0;
  }
}

thanks

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/low-quality-posts/18937124) — gp_sflover, Feb 26 '18 at 12:22
@gp_sflover, thanks for the information. I have updated my answer. Please remove the downvote if you have done the same. — AddWeb Solution Pvt Ltd, Feb 26 '18 at 12:45
thanks for the updating but unfortunately the DV is not mine :-( — gp_sflover, Feb 26 '18 at 12:47

ionic 2/3: How to select tabs dynamically

2 Answers2