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 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 the 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, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


 

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

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 …

  • Warner

    Hi. In this example, you showed us how to pass a string value through service.

    Can you please show us how to pass an object value?

    Thanks.

  • Graciele E. Victor

    Hello Dragan,

    Didn’t change your code (downloaded from github), and when I try to run, I’m getting this error:

    Unexpected token (11:22) while parsing file

  • Adil shaikh

    Hi,
    I get an error No provider for ShareService using the second approach. As I have not included ShareService in providers but included other injected services. Any Help !

    • Sorry for a late response, I was away until few days ago. The main problem was ever changing Ionic 2 beta framework. This code is now updated to latest framework iteration.

      Plus I have switch the code to Truescript.

  • Alugbin Abiodun

    please will this work for javascript as well??

  • jjmahe

    I am impressed : you got me successfully share data between my pages! Thanks a lot!

  • Ewerton Willams

    Hi, this didn’t work for me :/ when I do in another class: this.myAttr = _myService.SomeMethod(), “this.myAttr” becomes undefined instead of receiving the method return.

  • Julien Castrie

    How would you do if you wanted some data class as a service (as you show in your example), and you want those data classes to use under the hood SQLite which would be embedded in another service taking care of connecting to the DB and also having some function to perform the common queries like select, insert, update, delete? My underlying question is “how to use a service in another service”?

  • Sai Krishna Sampath Kumar

    Hey hi. Your blog is really helpful. I’m new to this ionic as well as ionic2. Currently I’m working on ionic-2. Can you help me with creating an alarm app, exactly how it is in android mobiles. I would love to learn those kinda stuffs. Can you do it?

  • TheDanishDude

    Is there a way to handle data outside constructors?

  • Hi, will be an update for the Ionic 2 final? With a little of analysis we can know where every part go but it is a little distracting!

    Thanks for this post.

    • I have update this blog post to Ionic 3 so take a look.

  • Pingback: UXLX: I released an xAPI-enabled app on Android and iOS | K. Anthony: Instructional Designer()