If you are looking for the Ionic 2-3 version, find it here.
 
Finally, after almost two years I found time to update this article to the latest version of the Ionic framework.
 
A lot has changed since my previous article. The ionic framework is no longer coupled with Angular and we can go with other frameworks if needed (like React and Vue). On some level, this also sucks as we have lost one way of data sharing (even emitters), still, this is the price of progress. Even when it feels like we are regressing.
 
My previous article has talked about the Master-Detail pattern and how to handled REST calls with Ionic 4 and Angular. I will reuse what was used there and build this article on top of it. If you are interested in that article you can find it here. Be warned that in this article I will not explain some features explained in my previous articles. This one is dedicated only to sharing data; this way we can focus on what is important.
 
If you are impatient you can find a working example at the end of this article, which also includes GitHub repo example.
 
A long time ago, the initial version of the Ionic framework had a very confusing way of data sharing. It was mostly due to original Angular shortcomings. Thankfully, it changed for better since the introduction of Ionic 2 and 3.
 
I will show you two different solutions. As previously mentioned, there was a third solution, however, it is no longer viable as Ionic has switched back to the default Angular routing and emitter events can no longer be used as before to send information between components.
 
The first approach relays on the navigation service to send data between two pages during page transitions. This approach is straightforward but it works only in a few specific cases. If possible stick to the second approach.
 
The second approach is much more flexible. You will easily recognize it if you have ever worked with the original Ionic framework. To be more specific, 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 for the future use. For example, this is an excellent solution if you want to handle authorization process data.
 
 

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!
 

Preparations

 
First, make sure you have a working Ionic work environment:
 
To make this as simple as possible make you have these:
 
  • 1. Android, iOS, or browser environment (for this tutorial I will use Android)
  • 2. NodeJS
  • 3. Ionic
  • 4. Cordova
 
If you don’t have a working Ionic environment find more information here: Ionic 4 | Installation Guide.
 

1. Update Ionic CLI

 
While it is optional, make sure you have the latest nodeJS version. Sometimes you will not be able to install/update appropriate Cordova and Ionic versions.
 
Install the latest Ionic and Cordova:
 
npm install -g ionic cordova
 
or to do a simple update:
 
npm update -g ionic cordova
 
 

2. Create A New Project

 
ionic start IonicShareDataBetweenPagesV2 blank
cd IonicShareDataBetweenPagesV2
 
If you just want to look at the working example, you can find it at the end of this article, just follow the provided README.md instructions. Jump to the working example here.
 
To make our life easier we will generate required pages and services.
 
ionic g page pages/second
ionic g service services/data-service
 
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. Reequired Platform

 
If working with Android add platform like this:
 
ionic cordova platform add android
 
Mac users can also add iOS platform:
 
ionic cordova platform add ios
 
Or, as this article is not platform-specific you can test it in your browser of choice:
 
ionic cordova platform add browser
 

Solution 1 – Page Transition Data Sharing

 
Unfortunately, push() and pop() methods are no longer working with Angular-based routing so we need to go with Angular solution.
 
This approach is the easiest one, however, it’s only usable while doing a transition between two pages.
 
Essentially, during the transition, we will be using routing to send information between pages.
 
For example, we can define our route like this (app-routing.module.ts):
 
{ path: 'second/:name', loadChildren: './pages/second/second.module#SecondPageModule' },
 
Inject the router into the class:
 
private router: Router
 
And finally, send data like this:
 
this.router.navigateByUrl('/second/' + this.name);
 
Of course, you can also do it via HTML:
 
<ion-item [href]="'/second/' + name">

</ion-item>
 
Finally, this is how you can access it after transition:
 
constructor(private route: ActivatedRoute) { }
 
and:
let name = this.route.snapshot.paramMap.get('name');
 
To keep reading, continue to the next page …