Ionic [2 & 3] | Sharing & Passing Various Data Between Pages

Written by on June 27, 2019

Ionic [2 & 3] | Sharing & Passing Various Data Between Pages

If you are looking for the Ionic 4 version, find it here.

Finally, here’s another instalment of updated Ionic 2|3 article series. My previous tutorial demonstrated how to create your first Ionic 2|3 application. You have also been able to learn how to work with Master-Detail pattern, share data between different pages and finally how to establish a successful REST call.

While my previous article is an excellent showcase of what Ionic 2 can do, it was never intended as a complete overview. It will take much more time and effort to showcase you the real power of the Ionic framework.

This article will dive deeper into the Ionic framework data sharing topic.

Original Ionic had a pretty confusing way(s) of data sharing (mostly due to AngularJS shortcomings), Ionic 2|3 is an utterly different story.

I will show you three different solutions. Each one of them has advantages and disadvantages and I will cover them later down the line.

The first solution relays on the navigation service to send data between two pages during page transitions. While this approach is straightforward it works only in this specific case, nothing else nothing more.

The second solution is much more flexible. You will recognize this approach if you have ever worked with the original Ionic framework. I’m talking about sharing data using services. This is also a solution you will most likely use as it’s extremely flexible plus you can persist data with it for the future use. For example, this is an excellent solution if you want to handle authorization process data.

The third and last choice is similar to the first solution. You can emit data and any listener (that waits for a specific set of data) will automatically pick it up. This is an excellent approach if you want to share data with pages or components which are not in the focus, but it will only work on previously loaded pages. So you will not be able to emit data between two pages if the second page was never active.

Note: If this tutorial was helpful, you need further clarification, something is not working or you have a request for another Ionic post? Furthermore, leave me a comment below if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com. Thanks and have a nice day!

Table of Contents

Is Ionic (2 or 3) causing you problems? Are you struggling with your application? Trust me, I was in the same situation as you. If you require more information beyond the subject of this article, you will probably find it in a list below. Take a look; if there’s a topic not covered here, leave me a comment, and I will do my best to cover it.

[spoiler title=”Click here if you want to see a list of topics covering Ionic (2|3) framework”]

Introduction to Object Oriented JavaScript

Ionic 2 Tutorials


[/spoiler]

Preparations

Please, make sure your Ionic [2|3] work environment is set up and ready. One another thing, this framework is now known simply as Ionic. Further down the line, I will refer to it only as such; I will not use version numbers, it will be referred to as Ionic.

Make sure you have these:

  • Android Environment (or iOS if you’re working on a MacOS)
  • nodeJS
  • Ionic
  • Cordova

If you don’t have a prior Ionic installation find more information here: Ionic [2|3] | Installation Guide.

1. Update Ionic CLI

As a matter of fact, if possible, make sure you have the latest nodeJS version. Without it, we will not be able to appropriately install/update Cordova and Ionic. Worst case scenario, use any recent version you like or prefer.

On the other hand, if your development environment is already set up for Ionic/Cordova, make sure it’s up to date; older versions may not work with this tutorial:

npm install -g ionic cordova

or to do a simple update:

npm update -g ionic cordova

2. Create A New Project

ionic start IonicShareDataBetweenPages blank
cd IonicShareDataBetweenPages 

For all of you who can’t wait, you can find a working example at the end of this article, just follow the provided README.md instructions.

Warning: As some of you don't have a prior Ionic CLI experience, from this point and on, every time I tell you to execute something, do that inside an example project folder.

3. Add Required Platform

Add Android platform:

ionic cordova platform add android

MacOS users can also add iOS platform:

ionic cordova platform add ios

Embeded Example

Ionic Data Share

Solution 1 – Page transition data sharing

This solution is the easiest one, and it’s only usable while doing a transition between two pages.

Essentially, during page transition, we can use the push method to send data from one page to another.

The push method is part of a NavController service and we need to initialize it on both origin and destination page/component:

import { NavController} from 'ionic-angular';

Inject it into class constructor:

constructor(public navCtrl: NavController) {

}

And finally push it like this:

this.navCtrl.push(SecondPage, {
	param1: 'John', param2: 'Johnson'
});

The first push method parameter is destination page; in our case it’s SecondPage. A second parameter is an object holding data we’re trying to push.

This object is send using NavParams service so don’t forget to import/inject it into application destination page.

Finally, this is how you can access it:

this.parameter1 = navParams.get('param1'); 
this.parameter2 = navParams.get('param2');
To keep reading, continue to the next page …

Categories

Leave a Reply