angular - How to go directly to a Tab

Question

I'm trying to make a homescreen page, where you don't have the tabsmenu and where I want to have some buttons to go straight to some Tab.

I'm using the function this.navCtrl.push(TabsPage);

But this function just go to the the first tab, always, to I have some extra param to go straight to some of my tabs?

Answer 1

I'm afraid it's not included in Ionic by default, but you can add it to your app very easily. Please take a look at this working plunker

Like you can see there, we just push the page that contains the tabs, but we send a parameter with the index of the tab that we want to select:

  public openFirstTab(): void {
    this.navCtrl.push(TabsPage);
  }

  public openSecondTab(): void {
    // The second tab is the one with the index = 1
    this.navCtrl.push(TabsPage, { selectedTab: 1 });
  }

Then in the page that contains the tabs, we get the instance of the tabs, and we select the index received as parameter (if any):

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

  private selectedTab: number;

  public tab1Root = FirstTabPage;
  public tab2Root = SecondTabPage;

  constructor(private navParams: NavParams) {
    this.selectedTab = this.navParams.get('selectedTab') || 0;
  }

  ionViewWillEnter() {
    if(this.selectedTab) {
      this.tabRef.select(this.selectedTab);
    }
  }

}

Please notice that in the view you'd need to include the #myTabs template variable to be able to get the instance of the tabs in your component code.

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