Skip to main content

Ionic Passing Data Between Tab Components

Share on FacebookTweet about this on TwitterShare on Google+Share on RedditShare on StumbleUponDigg thisFlattr the authorPin on PinterestShare on TumblrShare on LinkedInPrint this pageBuffer this page

In this post, we will take a look at how you can pass data between different tab components. We will be passing data in our Ionic app using a shared provider. This way of passing data can be used between any two components and is not limited to the tabs component.

In one of my previous post, I showed how you can navigate between pages with parameters. When navigating between pages Ionic provides a push method that you can use. On that push() method you can pass the data that you want as parameters. This is simple and straight forward.

Let’s now take a look at how you can pass data between tabs.

Step 1)

We will start off by creating a fresh Ionic app with the tabs template. This can be done by running the following command.

Note that I have navigated my command prompt inside the project where we will run the next command.

 

Step 2)

We will create a provider using the Ionic CLI by running the following command.

Doing so the Ionic CLI will create a providers folder and create the provider inside it. Also, the Ionic CLI will add the DataProvider to the app.module.ts file.

Step 3)

First, we will code the data provider. So open up src\providers\data\data.ts and code it as follows

Here we are just creating a public variable called paramData of type any. You can typecast it as you want and add any interfaces to it as per your needs. Note here that I have removed all the references to the http module. You might have it when you create a new provider using the Ionic CLI. If not removed in this example, the http module will give us an error as it has not been added to the app.module.ts file. So, it’s better to remove it from DataProvider.

 

Step 4)

Now we will code up or home page and add a button which when clicked will take us to another tab and also set the data of the shared provider. Open up src\pages\home\home.html and code it as follows.

Here we are adding a button and wiring it up to a function named goToAbout(). As the name of the function suggests it will navigate us to the About tab.

Step 5)

Now it is time to code the goToAbout() function. Open up src\pages\home\home.ts and code it as follows.

As you can see we are first importing the DataProvider and injecting it to the constructor. Next, inside the goToAbout() function we are first setting the value of paramData which we have access to in the shared DataProvider. Then we are navigating to the second tab by this.navCtrl.parent.select(1). Here, as the tabs have zero based index we will be navigated to the second tab when we pass 1 in the select() method.

Step 6)

In the About tab now we will display the data. To do so open up src\pages\about\about.ts and code it as follows.

Here we are again importing the DataProvider and then using it in the constructor to set the value of a local variable to that of the variable of the shared provider by doing this.localData = this.data.paramData.

 

Step 7)

To display the string we will need to bind it to the html. Open up src\pages\about\about.html and code it as follows.

Here we are just displaying the data using interpolation by doing {{localData}}.

 

Conclusion

In this example, we are just setting the value of the shared provider variable to a string. But, you can set to a much more complex data. A thing to note here is that the shared provider is shared between all the components in the same module. You just have to add it to the component and you can start referencing it.

Download Code:


Code Will Be Sent Via Email

 

Leave Me Your Questions And Feedback

Getting your feedback inspires me the most so hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @pointDeveloper

 

Consider Subscribing / Donating
Subscribe To Mailing List
Donate
If my site was helpful to you, then please consider donating via paypal:
  • Omer Hussain

    Thanks Man! Exactly what I was looking for…. **THUMBS UP**

  • Omer Hussain

    I have achieved to send the data with localStorage and its working fine …. But your approach is the right way of doing it.

%d bloggers like this: