Passing dynamic values in tabs through rootParams


#1

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?


#2

Post:

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


#3
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


#4

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


#5

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

<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>


#6

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


#7

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


#8

@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


#9

// 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');
 }     

}