Ionic 4 | Sharing Data Between Pages/Components (Angular)

Written by on June 27, 2019

Ionic 4 | Sharing Data Between Pages/Components (Angular)

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 …

Categories

18 thoughts on “Ionic 4 | Sharing Data Between Pages/Components (Angular)”

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

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

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

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

  5. 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”?

  6. 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?

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

  8. Can you explain how one could update the names with a user inputed data? I’m having trouble getting this to work. Thanks!

        • Awesome, Thanks for the quick reply, looking at another example showed me what I was doing wrong. I was actually stuck on the part where I needed to access the update function. I had to declare shareService as private in the HomePace constructor in case anyone else runs into the same issue (may not be the best way around it but works). Thanks again!

Leave a Reply