Ionic2 change Tabs selectedIndex property from a childpage

Question

I'm kind of a beginer in Angular2 and Ionic2. I am trying to build my own small app using Ionic2's Tabs component.

I want to be able to change the tab using a button in my childpage. I have tried using NavController.setRoot() and NavController.push() but none of them have the desired behaviour.

setRoot(Homepage) sets the correct view but doesn't change the selected tab in the tab menu. push(Homepage) sets the correct view but the Tabs menu is not visible anymore.

I am a bit confused about how should I comnunicate with the TabsPage (the @Component that holds the tabs) from my single pages.

Thanks!

Answer 1

Well, there should be an easier way to do this, but I did it this way:

Because in order to change the active tab you should do it from the Tabs Component, I used a shared service to handle the communication between the pages inside the tab and the tab container (the component that holds the tabs) . Even though you probably could do it with Events I like the shared service approach because is easier to understand and also to mantain when the applications start growing.

So basically the TabServices only creates an Observable to allow the tabs container to subscribe to it, and also declares the changeTabInContainerPage() method that will be called from the tab pages.

import {Injectable} from '@angular/core';
import {Platform} from 'ionic-angular/index';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class TabService { 

  private tabChangeObserver: any;
  public tabChange: any;

  constructor(private platform: Platform){
    this.tabChangeObserver = null;
    this.tabChange = Observable.create(observer => {
        this.tabChangeObserver = observer;
    });
  }

  public changeTabInContainerPage(index: number) {
    this.tabChangeObserver.next(index);
  }

}

Then, in each page (inside the tabs) we only add a button and bind that to a method that calls the service:

Page1.html

<ion-content class="has-header">
  <div padding style="text-align: center;">
    <h1>Page 1</h1>

    <button secondary (click)="changeTab()">Select next tab</button>
  </div>

</ion-content>

Page1.ts

import { Component } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { TabService } from 'tabService.ts';

@Component({
  templateUrl:"page1.html"
})
export class Page1 {

  constructor(private tabService: TabService) { }

  public changeTab() {
    this.tabService.changeTabInContainerPage(1);
  }
}

And finally, in the tabs component, we only subscribe to the method in the service, and then we change the selected tab with this.tabRef.select(index);

import { Component, ViewChild } from "@angular/core";
import { Page1 } from './page1.ts';
import { Page2 } from './page2.ts';
import { TabService } from 'tabService.ts'; 


@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  @ViewChild('myTabs') tabRef: Tabs;

  tab1Root: any = Page1;
  tab2Root: any = Page2;

  constructor(private tabService: TabService){
    this.tabService.tabChange.subscribe((index) => {
      this.tabRef.select(index);
    });
  }
}

Please notice that we're getting a reference to the Tabs instance by adding #myTabs in the ion-tabs element, and we get it from the component with @ViewChild('myTabs') tabRef: Tabs;

<ion-tabs #myTabs>
  <ion-tab [root]="tab1Root" tabTitle="Tab 1"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Tab 2"></ion-tab>
</ion-tabs>