# Passing dynamic values in tabs through rootParams

**URL:** <https://forum.ionicframework.com/t/passing-dynamic-values-in-tabs-through-rootparams/105796>\
**Category:** ionic-v3\
**Created:** [September 18, 2017, 12:02pm UTC](https://forum.ionicframework.com/t/passing-dynamic-values-in-tabs-through-rootparams/105796 "2017-09-18T12:02:13Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Arunpkumar1991](https://avatars.discourse-cdn.com/v4/letter/a/7993a0/32.png) [@Arunpkumar1991](https://forum.ionicframework.com/u/Arunpkumar1991)\
**Post date:** [September 18, 2017, 12:02pm UTC](https://forum.ionicframework.com/t/passing-dynamic-values-in-tabs-through-rootparams/105796/1 "2017-09-18T12:02:13Z")

</div>

I want to pass a array of data on to different tabs .So i set the my json array to an variable and tried passing through the rootParams attribute in ion tabs .I tried many different ways but couldn,t able to fix it. Anyone could help me to solve or got any alternate method to do it?

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [September 18, 2017, 8:39pm UTC](https://forum.ionicframework.com/t/passing-dynamic-values-in-tabs-through-rootparams/105796/2 "2017-09-18T20:39:05Z")

</div>

> [@Arunpkumar1991](#):
>
> I tried many different ways

Post:

What code you have  
What it does  
What you wish it did instead  
How those two things are different

---

<div class="post-metadata">

**Author:** ![Arunpkumar1991](https://avatars.discourse-cdn.com/v4/letter/a/7993a0/32.png) [@Arunpkumar1991](https://forum.ionicframework.com/u/Arunpkumar1991)\
**Post date:** [September 19, 2017, 4:31am UTC](https://forum.ionicframework.com/t/passing-dynamic-values-in-tabs-through-rootparams/105796/3 "2017-09-19T04:31:10Z")

</div>

```auto
export class TabsPage {
  public allCoins:any=[];
  tab1Root = HomePage;
  tab2Root = AboutPage;
  tab3Root = ContactPage;
  tab1Params :any ;
  tab2Params :any;
  tab3Params :any ;

  constructor(private sortOrder:SortPageProvider,public apicall: ApiServiceProvider) {
    let test1 : any;
    this.apicall.callApiRequest().then(data=>{
      this.allCoins = data;

      console.log('allcoin', this.allCoins);
      test1 = { data: this.allCoins };
       this.tab1Params = { data: this.allCoins };
      this.tab2Params = {data: this.allCoins };
      this.tab3Params = {data: this.allCoins };

    });

  }
}

```

this is the code

i want to pass the value of that all coins through tabparams but i cant . I tried directly passing it through the html still it was not working

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [September 19, 2017, 5:02am UTC](https://forum.ionicframework.com/t/passing-dynamic-values-in-tabs-through-rootparams/105796/4 "2017-09-19T05:02:25Z")

</div>

You did not explain what happens, what you want to happen, and how they are different.

---

<div class="post-metadata">

**Author:** ![Arunpkumar1991](https://avatars.discourse-cdn.com/v4/letter/a/7993a0/32.png) [@Arunpkumar1991](https://forum.ionicframework.com/u/Arunpkumar1991)\
**Post date:** [September 19, 2017, 5:10am UTC](https://forum.ionicframework.com/t/passing-dynamic-values-in-tabs-through-rootparams/105796/5 "2017-09-19T05:10:01Z")

</div>

for what happens::

A) i cant pass the value of that allcoins from tab.ts to home.ts(which is child of tab)

What i want to happen:

A) I want to pass that array from tab.ts to home.ts so that i can fetch the array in the child tab

The point ia m saying is that if i pass a string manualy there like say if i type tabparam : ‘string’;  
I am able to fetch the value in home.ts with navparams

But i was not able to pass that dynamic value from parent tab to its child tabs

```auto
<ion-tabs>
  <ion-tab [root]="tab1Root" [rootParams]="{data: allCoins}" tabTitle="Hour" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" [rootParams]="tab2Params" tabTitle="Week" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="tab3Root" [rootParams]="tab3Params" tabTitle="Month" tabIcon="contacts"></ion-tab>
</ion-tabs>

```

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [September 19, 2017, 5:20am UTC](https://forum.ionicframework.com/t/passing-dynamic-values-in-tabs-through-rootparams/105796/6 "2017-09-19T05:20:08Z")

</div>

I would suggest moving the code that cares about the result of this `callApiRequest()` to the subpage instead of the tab host.

---

<div class="post-metadata">

**Author:** ![Arunpkumar1991](https://avatars.discourse-cdn.com/v4/letter/a/7993a0/32.png) [@Arunpkumar1991](https://forum.ionicframework.com/u/Arunpkumar1991)\
**Post date:** [September 19, 2017, 5:22am UTC](https://forum.ionicframework.com/t/passing-dynamic-values-in-tabs-through-rootparams/105796/7 "2017-09-19T05:22:40Z")

</div>

Thanks for the reply. But what i want to know can we pass an array with rootParams?

---

<div class="post-metadata">

**Author:** ![Arunpkumar1991](https://avatars.discourse-cdn.com/v4/letter/a/7993a0/32.png) [@Arunpkumar1991](https://forum.ionicframework.com/u/Arunpkumar1991)\
**Post date:** [October 16, 2017, 11:49am UTC](https://forum.ionicframework.com/t/passing-dynamic-values-in-tabs-through-rootparams/105796/8 "2017-10-16T11:49:50Z")

</div>

@rapropos

so that i can get the value in all the child tabs and just ahve to make an ajax call only in the parent tab page

---

<div class="post-metadata">

**Author:** ![elekson](https://avatars.discourse-cdn.com/v4/letter/e/a183cd/32.png) [@elekson](https://forum.ionicframework.com/u/elekson)\
**Post date:** [April 11, 2018, 10:03am UTC](https://forum.ionicframework.com/t/passing-dynamic-values-in-tabs-through-rootparams/105796/9 "2018-04-11T10:03:40Z")

</div>

// in the tabs.ts  
import { Component } from ‘@angular/core’;  
import { IonicPage, NavController, NavParams } from ‘ionic-angular’;

import { Http } from ‘@angular/http’;  
import ‘rxjs/add/operator/map’;

@IonicPage()

@Component({  
templateUrl: ‘tabs.html’  
})

export class TabsPage {

constructor(public navCtrl: NavController, public navParams: NavParams, public http: Http) {

```
        this.initializeParams();
 }
 tab1Root = 'Tab1Page';

```

tab2Root = ‘Tab2Page’;  
tab1Params: any;

initializeParams()  
{  
this.tab1Params = { id: 1,  
nam: ‘John’};  
}  
}

//in the tabs.html  
  
\<ion-tab [root]=“tab1Root” [rootParams]=“tab1Params” tabTitle=“Home” tabIcon=“home”\>  
\<ion-tab [root]=“tab2Root” [rootParams]=“tab2Params” tabTitle=“About” tabIcon=“information-circle”\>

//in the tab1.ts  
import { Component } from ‘@angular/core’;  
import { IonicPage, NavController, NavParams } from ‘ionic-angular’;

import { Http } from ‘@angular/http’;  
import ‘rxjs/add/operator/map’;

@IonicPage()  
@Component({  
selector: ‘page-tab1’,  
templateUrl: ‘tab1.html’,  
})  
export class Tab1Page {

id: string;  
nam: string;

constructor(public navCtrl: NavController, public navParams: NavParams, public http: Http) {

```
        this.id= navParams.get('id');
        this.nam= navParams.get('nam');
 }     

```

}