Ionic 2 passing tabs NavParams to tab

by

This question is a few weeks old so you may have already found the answer. This feature was added in February: https://github.com/driftyco/ionic/issues/5475.

Taking the code from your original tab page, let’s say a parameter is passed to the “parent” tab page and we want to store it in a property called fooId (this could be an object, or just a simple integer or string value, whatever):

@Component({
    templateUrl: 'tabs.html'
})
export class TabsPage {
  constructor(params: NavParams) {

      this.params = params;
      console.log(this.params); // returns NavParams {data: Object}
      this.fooId = this.params.data;

      // this tells the tabs component which Pages should be each tab's root Page
      this.tab1Root = Tab1;
      this.tab2Root = Tab2;
      this.tab3Root = Tab3;
    }
}

Then in your tabs.html, you can reference it like this using the rootParams attribute (rootParams is referenced in the documenation here):

<ion-tabs>
    <ion-tab tabTitle="Tab1" [root]="tab1Root" [rootParams]="fooId"></ion-tab>
    <ion-tab tabTitle="Tab2" [root]="tab2Root" [rootParams]="fooId"></ion-tab>
    <ion-tab tabTitle="Tab3" [root]="tab3Root" [rootParams]="fooId"></ion-tab>
</ion-tabs>

Then in your Tab1 page, you can reference your NavParams just like any other page and the value passed for foodId will be there.

Leave a Comment