Changing tabs dynamically in Ionic 2

Question

I am creating an Ionic application where I am using tabs. I want to be able to navigate from one tab to the other using the typescript component class attached to the tab template. For example, Tab 2 should be activated upon triggering an event in tab 1.

My tab loads well in the tabs and all is well as long as I manually click on the tab to move around, but trying to switch context in the code behind as been very tricky.

At load time I am able to make any one of the tabs active by simply setting the [selectedIndex] attribute of the ion-tabs to the value of an attribute in my tabs component class.

Tabs Parent Template - tab.html

<ion-tabs #tabParent [selectedIndex]="tabToShow">
  <ion-tab tabTitle="Tab 1" [root]="tab2" [rootParams]="{parent : tabParent}"></ion-tab>
  <ion-tab tabTitle="Tab 2" [root]="tab2" [rootParams]="{parent : tabParent}></ion-tab>
  <ion-tab tabTitle="Tab 3" [root]="tab3" [rootParams]="{parent : tabParent}></ion-tab>
</ion-tabs>

Component - tab.ts

import {Page} from 'ionic-angular';
import {Tab1} from '../tab1/tab1.ts';
import {Tab2} from '../tab2/tab2.ts';
import {Tab3} from '../tab3/tab3.ts';

@Page({
templateUrl : 'build/pages/tab/tab.html'
})

export class Tab{

tab1: any;
tab2: any;
tab3: any;

tabToShow : number = 1;

ngOnInit(){
 this.tab1 = Tab1;
 this.tab2 = Tab2;
 this.tab3 = Tab3;
 }

}

In the component for the first tab (Tab1), i am able to get a reference to the parent tabs by using [rootParams] = "{parent : tabParent}" and I am able access all available properties exposed by the tabs object. An event generated on the tab1.html template, causes the goToTab2() to be called. So, I was able to set SelectedIndex to 1 (which I expect to change the active tab to the second tab). But the tab is not changing.

tab1.ts

import {Page, NavParams} from 'ionic-angular';
import {Tab2} from '../tab/tab2/tab2.ts'

@Page({
 templateUrl : 'build/pages/tab/tab1/tab1.html'
})

export class Tab1{

parent : any;

constructor(nav : NavParams){
this.parent = nav.data;
}

goToTab2(event, value): void{
 this.parent.parent.selectedIndex = 1;
 console.log(this.parent.parent);
 }

}

I need help, what am I doing wrong?

Answer 1

this.nav.parent.select(tabIndex); 

tabIndex starts from 0

Answer 2

export class Page1 {
  tab:Tabs;

  // create a class variable to store the reference of the tabs

  constructor(public navCtrl: NavController, private nav: Nav) {
    this.tab = this.navCtrl.parent;

    /*Since Tabs are declarative component of the NavController 
      - it is accessible from within a child component. 
      this.tab - actually stores an array of all the tabs defined 
      in the tab.html / tab component.
   */
  }

  goToTab2 (){  
    this.tab.select(1);

  //  the above line is self explanatory. We are just calling the select() method of the tab
  }
  goToTab3 (){
    this.tab.select(2);
  }
}

Answer 3

You can get tabs element by using @ViewChild or IonicApp.getComponent(). The tab-button can be accessed by going through tabs element. The tab-button click event is bound to onClick function by using @HostListener. You can switch tab by calling the tab-button onClick button.

export class TabsPage {
  tab1TabRoot: Type = Tab1Page;
  tab2TabRoot: Type = Tab2Page;
  tab3TabRoot: Type = Tab3Page
  @ViewChild(Tabs) tabs;

  constructor(
    private _ngZone: NgZone,
    private _platform: Platform,
    private _app: IonicApp,
  ) {
  }

  ngOnInit() {
  }

  ngAfterViewInit() {
    console.log(this.tabs);
  }

  public selectTab2() {
    this._ngZone.run(function() {
      tabs._btns._results[0].onClick();
    });
  }
}

Answer 4

I wanted to navigate to tabbed pages from a side menu. To enable that I did the following:

Tabs.html:

<ion-tabs selectedIndex="{{activeTab}}">
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Profiles" tabIcon="filing">     </ion-tab>
</ion-tabs>

Tabs.ts

...normal stuff preceding ...
export class TabsPage {
 @ViewChild('page-tabs') tabRef: Tabs;
 activeTab: any;
 tab1Root: any = HomePage;
 tab2Root: any = ProfilesPage;

 constructor(public navCtrl: NavController, public params: NavParams) {
    this.authUser = params.get("authUser");
    this.activeTab = params.get("tab")?params.get("tab"):0;
 } 

}

Then I just passed the tab parameter from app.component.ts

...normal stuff preceding ...
export class MyApp {
 @ViewChild(Nav) nav: Nav;
 isAppInitialized: boolean = false;
 rootPage: any
 pages: Array<{title: string, type: string, index?: number, component?: any}>;

  constructor(
   private platform: Platform,
   public menu: MenuController) {

 }

 ngOnInit() {
    this.platform.ready().then(() => {
     this.pages = [
       {title: 'Home', type: 'tab', index: 0},
       {title: 'Profiles', type: 'tab', index:1},
       {title: 'Create Shares', type: 'page', component: HomePage},
       {title: 'Existing Shares',type: 'page', component: ProfilesPage}
     ];
    });
  }

 openPage(page) {
   this.menu.close();

   if (page.type==='tab') {
     this.nav.setRoot(TabsPage,{tab: page.index});
   } else {
     this.nav.setRoot(page.componenet);
   }
}

}

Then in app.html

 <ion-header>
    <ion-toolbar>
      <ion-title>Left Menu</ion-title>
        <button class="absolute-right" ion-button clear menuClose="left">
          <span ion-text showWhen="ios">Close</span>
          <ion-icon name="md-close" showWhen="android,windows"></ion-icon>
      </button>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <button ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>
</ion-menu>

There you have it...

Answer 5

Its simple just use NavController class and its property .parent.select(position of tab you want)

constructor(public navCtrl: NavController) {
}
goToTab2(){
    this.navCtrl.parent.select(1);
}

Answer 6

In your tab1 component (tab1.ts),try to inject the parent component Tab :

export class Tab1{
  constructor(@Host() _parent:Tab) {}
  goToTab2(event, value): void{
    this._parent.tabToShow = 1 ;
  }
}