Send data from one tab to another

Ionic Framework ionic-v3
1

Hi all,

I am using ionic tabs

  <ion-tabs selectedIndex="0">
    <ion-tab tabTitle="Latest" [root]="latest" [rootParams]="{user}"></ion-tab>
    <ion-tab tabTitle="Favorites" [root]="favorite" [rootParams]="{user, filter: filter}"></ion-tab>  
    <ion-tab tabTitle="Filter" [root]="filterPage" [rootParams]="{ request: filterValue, filter: filter}"></ion-tab>  
  </ion-tabs>

and I have to send data from the tab-3 (Filter) to tab-1 (Latest).

I tried using this.nav.parent.select(0);

but this is just changing the tabs and not sending any data. Tried sending data as second argument

like this this.nav.parent.select(0, {user});

still not working in desired way …

Is there any other way to send data across tabs? or to call a function from tab-3 to tab-1 ?

2

@piyukore
please refer this link may be it helps you
data transition between tabs

3

@saiionic thanks for your reply … but your answer refers to sending data from root tabs to each of the tab using [rootParams]. I am looking for something from one tab to another

4

Have you found the answer? I’m trying to pass values from Child Tab to Tabs Parent Page.

5

There are many ways to do this, but in general, they involve keeping the passed value somewhere that’s accessible to both tabs and checking the value every time you enter the tab. I share values across several tabs by keeping those values in the browser’s built-in IndexedDB database.

6

@piyukore I’m a bit late to the discussion, but you can create a container object in the Tabs page (the one that has the ion-tabs), and use the same object instance for Tab1 and Tab3.

In the Tabs page:

myContainer: { user?: any } = {};

Then, in the HTML:

<ion-tabs selectedIndex="0">
    <ion-tab tabTitle="Latest" [root]="latest" [rootParams]="myContainer"></ion-tab>
    <ion-tab tabTitle="Favorites" [root]="favorite" [rootParams]="{user, filter: filter}"></ion-tab>  
    <ion-tab tabTitle="Filter" [root]="filterPage" [rootParams]="{ request: filterValue, filter: filter, container: myContainer }"></ion-tab>  
</ion-tabs>

In Tab3, when you want to define the user:

let container: { user: any } = this.navParams.data.container;
container.user = user;

In Tab1:

let user = this.navParams.data.user;

Or, if you want it as an attribute, use a get method (or something similar) to make sure the value is up to date:

public get user(): any {
    return this.navParams.data && this.navParams.data.user; 
}

Then you can use the user attribute as any other attribute:

public test() {
    console.log('user: ', this.user);
}

I hope this helps.

7

Ionic 3

Having to tabs

 <ion-tab #tab1 [root]="tabPage1" [rootParams]="{....
 <ion-tab #tab2 [root]="tabPage2" [rootParams]="{....

Lets say you want to send a data from tab1(index 0) to tab2(index 1)…

In tab1 use:

 this.navCtrl.parent.getByIndex(1).rootParams={key:value}
1 Like
8

I dislike the previous suggestion because it constitutes mystery action at a distance. A mutually injected service provider would be clearer.

1 Like
9

Hi,

can you look on this.

to pass value one tab to another tab

https://ionicblog.quora.com/To-Send-data-from-one-tab-to-another-tab-using-navparams-in-ionic

1 Like
11

@noeguer
Thanks it works…i have two tabs… i am using . i want to send data from one tab to another tab when button click from 1st tab.The following code works in browser.But not working in mobile.
When i clicking button from 1st tab,its not navigating to 2nd tab in mobile.

        tab:Tabs;
         ////////////////
        constructor(public navCtrl: NavController){
        this.tab = this.navCtrl.parent;
        }
        /////////////when button click//////////////
        this.tab.getByIndex(1).rootParams={tableData:response};
        this.tab.select(1);