How to select tabs in ionic 2? - ionic2

Question

I'm struggling to create a basic application in Ionic2 that uses both the side-menu and the tabs navigation. I understand the concepts of the navigation stack and that each tab has its own navigation stack, but I can't grasp the control over the tabs themselves.
The tabs starter template initializes a project with one ion-nav having its rootpage pointing to "rootPage", a property of the #App pointing to a TabsPage class.
<ion-nav id="nav" [root]="rootPage" #content></ion-nav>
The TabsPage class defines 3 properties, one for each page, pointing to their respective classes (each class decorated with #Page). But the TabsPage class itself doesn't seem to have any function, or be injected with a tabs controller and I find little to no documentation on how to acquire a Tabs instance (there are instance methods referenced on http://ionicframework.com/docs/v2/api/components/tabs/Tabs/)
What I managed to do:
Use one tab to control the other.
import {Page, Tabs} from 'ionic-angular';
#Page({
templateUrl: 'build/pages/timeline/timeline.html'
})
export class Timeline {
tabs:Tabs;
constructor(tabs:Tabs) {
this.tabs=tabs;
this.selectTab(2);
}
selectTab(i:number) {
this.tabs.select(i);
}
}
The page above is injected with a Tabs instance, which inherits from NavController. The Tabs instance has the desired select method, and I can point to a different tab (by index, not by name). So in this situation selecting my 'timeline' tab will trigger the constructor, and instead of going to the timeline tab we end up selecting the 2nd tab.
What I would like to do: navigate to a tab with a link in the side-menu.
My side-menu consists of two ion-items, simple buttons with a click listener. In Ionic 1.x I could use a ui-sref or a href to match a certain state, but in Ionic 2 I can't figure out how to control my tabs.
I can access the ion-nav by giving it an id and using app.getComponent('nav'), but I can not target the ion-tabs this way (hoping it would be bound to a Tabs controller instance).

Answer 1

Each ion-tab is a declarative component for a NavController. Basically, each tab is a NavController. For more information on using navigation controllers take a look at the NavController API Docs.
So to access the array of tabs from inside a specific tab page (component) we can set our target path with as simple as :
NavController.parent
Now suppose, we are in a child page of one of our tabs - the component class will be somewhat similar as below:
import { Component } from '#angular/core';
import { NavController, Nav , Tabs } from 'ionic-angular';
// import Tabs
import { Page2} from '../page-2/page-2';
import { Page3} from '../page-3/page-3';
#Component({
templateUrl: 'build/pages/page-1/page1.html'
})
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);
}
}
Hope this helps.

Answer 2

I get this working by following:
app.ts
import {App, IonicApp, Platform} from 'ionic-angular';
#App({
template: '<ion-nav id="nav" [root]="rootPage"></ion-nav>',
})
export class TestApp {
rootPage: any = TabsPage;
constructor(
private platform: Platform,
private app: IonicApp
) {
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
});
}
}
tabs.html
<ion-menu [content]="content">
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
<ion-content>
<ion-list>
<ion-item (click)="openPage(p)" *ngFor="#p of pages;>
<span>{{p.title}}</span>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-tabs id="navTabs" #content swipe-back-enabled="false">
<ion-tab [root]="tab1"></ion-tab>
<ion-tab [root]="tab2"></ion-tab>
<ion-tab [root]="tab3"></ion-tab>
</ion-tabs>
tabs.ts
import {Page, NavController, MenuController} from 'ionic-angular';
#Page({
templateUrl: 'build/pages/tabs/tabs.html'
})
export class TabsPage {
pages: Array<{ title: string, component: any }>;
tab1: any = Tab1;
tab2: any = Tab2;
tab3: any = Tab3;
page: any = Page;
constructor(private nav: NavController,
private menu: MenuController) {
this.tab1 = Tab1;
this.tab2 = Tab2;
this.tab3 = Tab3;
this.pages = [
{ title: 'page-menu', component: Page }
];
}
openPage(page) {
// close the menu when clicking a link from the menu
this.menu.close();
// navigate to the new page if it is not the current page
}
}

Answer 3

my solution:
tabs.html : The main tip here is use #tabs
<ion-tabs tabs-only tabsLayout="icon-start" color="light" #tabs>
<ion-tab [root]="tabPage1" tabTitle="Mapa" tabIcon="qi-location arrow">
</ion-tab>
<ion-tab [root]="tabPage2" tabTitle="Em Andamento" tabIcon="qi-th-list" tabBadgeStyle="danger"> </ion-tab>
</ion-tabs>
tabs.ts: Use #ViewChild to bind the wild card used in tabs.html
#Component({
selector: 'page-tabs',
templateUrl: 'tabs.html',
})
export class TabsPage {
#ViewChild('tabs') tabRef: Tabs;
tabPage1: any = HomePage;
tabPage2: any = InProgressPage;
constructor() {
}
switchToHomePage(){
this.tabRef.select(0);
}
switchToInProgressPage(){
this.tabRef.select(1);
}
}
Another page to redirectc : Use #Inject(forwardRef(() => TabsPage)) to get access to parent page methods.
export class AnotherPage {
constructor(#Inject(forwardRef(() => TabsPage)) private tabsPage:TabsPage){}
switchToHome(){
this.tabsPage.switchToHomePage();
}
}