In my previous article, I showed you how to create your first Ionic 2 application. We also learned how to use Master-Detail pattern, share data between pages/components and how to establish a REST ($http) call.
 
While my previous article is an excellent showcase of what Ionic 2 can do, it was not intended as a complete overview. I will use this article to talk more about data sharing between different pages/components in Ionic 2.
 
Where original Ionic had a pretty confusing means of data sharing (mostly due to AngularJS shortcomings), Ionic 2 is entirely different story. Changes to navigation service made it possible to share data during page transitions; I’ll cover it as a solution 1. For a second solution, we can use a service class to share data between different pages/components.
 
A first solution is just a temporary one. Let’s say we want to pass a parameter or object from one page to another. For example, in the Master-Detail pattern, when we click on a list (Master page), and we want to see more information about selected element on a second page (Detail page).
 
This kind of information is relevant only during a page transition, but once it’s available on a second page, we don’t need to retain it anymore.
 
A second solution is much more permanent. For example, if our application has a login component, we want to be able to remember authorization data in any part of our application.
 
 

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

 
The Ionic 2 is a complex and sometimes difficult field of study so this article will hardly satisfy all your needs. 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 there, leave me a comment and I’ll cover it.
 
 

Preparations

 
Before we can begin, make sure you have everything preconfigured for Ionic 2.
 
You should have these:
 
  • Android Environment (or iOS if you’re working on a MacOS)
  • nodeJS
  • Ionic 2
  • Cordova
 
Find more information here: IONIC 2 | INSTALLATION GUIDE if you don’t have a previous Ionic 2 installation or if you never read my previous articles on this topic.
 

1. Update Ionic & Cordova

 
You need to have the latest version of nodeJS, without it, you’ll not be able to install/update Cordova and Ionic appropriately.
 
If you have a previous Ionic/Cordova installation make sure its up to date, older versions may not work with this tutorial. Though latest versions may also mess things up:
 
npm install -g cordova ionic@beta
 
or you can even do it like this:
 
npm update -g cordova ionic@beta
 
I will remove beta keyword once Ionic 2 reach RC status.
 
Warning: Ionic2 is still in beta so the final implementation may differ from this code. I will update this article if and when that happens.
 
 
 

2. Create A New Project

 
ionic start Ionic2ShareData blank --v2
cd Ionic2ShareData
 
Open app directory and remove all content from a directory called pages but don’t delete it. Somewhere below you’ll find a link to GitHub repo holding a working example (or you can copy past provided code). Download zipped project repo folder, copy app and www directory and past it into a newly created folder.
 
Warning: Since some of you never worked with Ionic CLI. From this point and further, every time I tell you to execute something, do that inside a project folder.
 
Add Android platform:
 
ionic platform add android
 
MacOS users can also add iOS platform:
 
ionic platform add ios
 
 
 

Embeded Example

 
Ionic Data Share
 

Solution 1 – Temporary Data Sharing

 
This solution is the easiest one, and you should use it only to send data from one page/component to another.
 
Essentially, while programmatically changing pages, 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(private navController: NavController) {

}
 
This is how you can use a push method:
 
this.navController.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; it’s as simple as that.
 
This object is send using NavParams service so don’t forget to import/inject it on a second-page:
 
import {NavController, NavParams} from 'ionic-angular';
 
constructor(private navController: NavController, private navParams: NavParams, private shareService: ShareService) {
 
Finally, this is how you can access it:
 
this.parameter1 = navParams.get('param1'); 
this.parameter2 = navParams.get('param2');
 
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”?