Passing tabs NavParams to tab

Ionic Framework ionic-v3
1

Hi all, I’m starting out on creating my first app using Ionic 2 and through a lot of trial and error have got to a point where no number of Google searching can find anything to help.

I’m trying to pass some NavParams to a tab. The NavParams are available in the parent tabs page:

@Page({
    templateUrl: 'build/pages/tabs/tabs.html'
})
export class TabsPage {
  constructor(params: NavParams) {

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

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

But I cannot seem to get the NavParams within a tab itself:

@Page({
    templateUrl: 'build/pages/tab1/tab1.html'
})
export class Tab1 {
    constructor(nav: NavController, params: NavParams, platform: Platform) {
        this.nav = nav;
        this.params = params;
        this.platform = platform;

        console.log(this.params); // returns NavParams {data: null}
    }
}

Any help would be greatly appreciated! I’m just not entirely sure how to pass the params from the tabs page to the tab itself or somehow request a param from the tab parent.

Thanks for any help!

2

Any help would be appreciated. There has to be a way to pass navParams to a tab or for the tab to access the parent navParams?

3

I don’t know if it is possible to do this in a Tabs page seeing as you’re not pushing anything into anywhere.

4

there is not enough code here to try and reproduce your project…

5

Yeah I think my approach is wrong. To give you some context I’m passing an id through to the TabsPage navParams to use to query an SQL table and display results on Tab1.

So this.params = params; = 1 on the TabsPage but then I’m not sure how to access it on the tab1 page. Essentially I need to do something like this.parent.params.

The only way I’ve been able to do it is to add it into the HTML:

<ion-navbar *navbar>
    <ion-title>Tabs Page</ion-title>
</ion-navbar>


<div id="paramid" style="display: none;">{{ id }}</div>
<ion-tabs>
    <ion-tab [root]="tab1Root" tabTitle="Tab 1"></ion-tab>
    <ion-tab [root]="tab2Root" tabTitle="Tab 2"></ion-tab>
    <ion-tab [root]="tab3Root" tabTitle="Tab 3"></ion-tab>
</ion-tabs>

then grab it out again in tab1:

this.id = document.getElementById('paramid').innerHTML;

But this seems a little messy.

6

Why dont make the a page part of the original tab (the one with the query) by using the NavController?
Check the docs for details…

7

There is an issue for this. We will have to use workarounds until an official method is created.

1 Like
8

Can you give an actual example? I think that answers such as “just check the docs” aren’t what forums are for.

1 Like
9

Ah thanks jpmckearin. Glad to know others have already raised the issue.

10

Is just that the docs have the perfect example and I dont want to copy paste it when its already done

But basically:

Import {NavController,NavParams} from (‘ionic/ionicframework’)

Class myPage {
constructor(nav:NavController,params:NavParams){
this.nav = nav;
this.params = params;
}
myMethod(){
this.nav.push(MyNewPage,{items = this.params});
}
}

Where the method is called from the HTML page using a (click)

You could also pass a value to the method

Note: This may have some errors as I did it from memory so check the DOCS for the working version :wink:

11

Thanks bandito but I think as jpmckearin pointed out, navParams can be passed to the tab parent but not to the tabs themselves.

Sounds like its a bug/feature to be fixed.

1 Like
12

You don’t have to copy-paste the code, but at least link the page of the docs you want to refer.

1 Like
13

Ok thanks for the suggestion :wink:

14

I see. I don’t see anything in the docs that might suggest that though. Hopefully it can be passed :wink:

15

Btw in that nav.push() i see you open a bracket { but never closed it.

16

Wrote it on the phone, don’t make fun of me :wink:

1 Like
17

Hi @lawlesscreation
Did you get any solution? I also like to parse paremeter like you but on my Tab1 always got null.
How do you make this work?
Thank you

18

I only had to pass through a database id so I just hide the value in an invisible div outside the tab page. Dirty but worked until there’s a better solution.

1 Like
19

An easier way of doing things is to create an injectable params service as below. You can use this to pass params directly to a tab or multiple tabs rather than using the NavController. This is only meant to be a temporary solution until the issue is resolved.

// Require framework
import {Injectable} from "angular2/core";

@Injectable()
export class Params {
  public params;

  constructor () {
    this.params = {};
  }
}

Credit due here : http://stackoverflow.com/questions/35162308/ionic-2-passing-tabs-navparams-to-tab

2 Likes
20

Hi @jamesbyrne ,

Could you please provide to us more example code how to apply an injectable params service ?
or
In my case from login page -> success -> get user data -> sent user params to tab page.
In ionic1 : I use $rootScope to put user data and use it every page.
How to do that in ionic2 ?
Thanks in advance.