IONIC — Sharing data between pages

In this post we are going to see how to pass data back and forth between ionic pages/components. In ionic there’s an in-build class named “NavController” which can be used to navigate between pages, and another one named “NavParams” to get data from the page you navigated from. Both classes are imported from package ionic-angular

Let’s start by generating the application:

For the demo we will start by generating two page application with two text inputs, which we will use to transfer data to one page and manupilate the data before come back.

Above command will create sample ionic application with one page named “home”, to continue let’s create another page name “about”:

Next we have to add the created page into the app-module.ts

Now the page setup is done. let’s share data 😋

Pass Data to a page….

Create input fields:

First we need input fields in both pages so we can send a string value to next page. let’s update “home” page first, here we have to change the home.html with text field to enter the name as below.

Now we have to modify home.ts to navigate to about page with the the entered name as parameters. to do so we can use the method push() in “NavController” package. Along with the push method we can send navgation parameters to the next page.

About page:

In about page we can use “NavParams” to get the data which is passing from “Home” page. NavParams are an object that exists on a page and can contain data for that particular view which offer a option with a get method.

Get Muthu Devendra’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Let’s modify the about.ts to get the parameter that has been send from home page,

To view the name in “About” page we can modify the about.html as well,

Get Data Back….

So we have send data from home page to about page using push() method in NavController, so how can we send back data to home page from about page.

To achive this we can use several methods.

1. Using callback function
2. Trigger an event inside the page
3. Using sigleton provider

1. Using callback function

First way to getting data back to home page is using callback functions. To do so we have to make changes to home.ts and about.ts files,

first we need to write the “callback function” in home.ts to capture the data which is send from aboutpage.

Let’s modify about page to send data back to home page, here what we have done is modifing the name coming from home page and send it back in ionViewDidleave() method;

2. Using Events

We can trigger an event to share the data back and forth too. what we do is, first we are triggering the event from about page and set the new data, then we can listen to the event from home page. every time we listen to the event we have to make sure to unsubscribe the event.

You can also use a singleton provider to set the properties and get the use of relevant data in multiple pages.

If this article was helpful, click on the clap 👏 button below to show your support!

Thank you for reading 😊😊