Skip to main content

Ionic Passing Data Between Tab Components

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


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



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

[recaptcha size:compact]


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
If my site was helpful to you, then please consider donating via paypal: