How to Pass Data with Angular Router in Ionic 4

hey everyone what's up this is Simon and welcome to another tutorial this time we will talk about passing date had two different routes in anionic for application and this isn't actually a hard topic but the migration from my only three to ionic four is very tricky especially for those of you they have all read all the tutorials where you should use an ID and then resolve the ID from the next page and you're like what I want to pass my object to that page like I did before so for all of you here are three solutions for your problem but first of all I've started a blank new ionic app and created a new page details so we can show some of the pushing stuff and then also for another use case created two services like this once you got this your app should look like this and we can go ahead so what we want to do is as I said cover three different ways to do it and first of all we will add three buttons to use those things right inside our app so we will use something with query params so at the functionality as well and we want to use it with a service sounds cool and finally we want to open it with a state so we will see what that is as well also we might want to have a little constructor in here and there we go also for the details page I will just bring in some code because that's really not the focus of this tutorial to write some HTML basically we got a little header area where the back button just the default stuff up there and then an eye on card can we format this a bit thanks and I own card with a header title subtitle so as you can see we rely on some data in that page and we want that data to come from our home page this super typical use case you get a list of whatever objects that you maybe already got from the you want to display the details for a person or whatever is in your list and you don't want to make another request to the service so you simply want to pass the information you already got in the list to the next page and that's exactly what we want to do so we can save everything but this file we don't really need this so let's dive into number one using query params this is actually not the recommended way and I just want to show it how you could do it this is very Hecky and again I wouldn't recommend it but let's cover it it's a bit like these hacker stuff things right where they say okay that's how you hack the nuclear plant in Russia and but please don't do it please not anyhow here we got the object that we want to pest the next page so just an example of course and then we of course need the private router in here the router as I have learned which is more common in the United States as far as I know so I will try to stick to router maybe one day this will work so what we want to do is before calling this router navigate before we do this we want to create some navigation extras that we can pass to this and it works by having first of all the details route in here I think yes that was automatically added to our routing and then actually you can pass in something more right here so if you take a look at this you see off the type navigation extras so let's use the type navigation extras like this and in here we can define quite a few things but the interesting part right now is the query param and let's say special whatever so these things will now be added to our navigation paths at the query parents so if we do it like this and we use the first button which is open with query parents just take a look at the route we see details and then the question mark special whatever just like you use from query parameter URL and from the next page we can now resolve this information so let's go to the details page and in the constructor we will first of all need the root which is the activated route and then the private router there we go so we've done this before by or forgetting the ID of the active route and now we just want to get the query parameter this to always receive the latest version once we're on that page and then we can check if we actually get them and if those contain the special field because we use our page now in different ways and in other cases it will then crashing I don't want to comment the code out that's why I'm using this and then we got the data of the type any and we can set our data to the params special okay so this should work pretty good we can add a console lock as well for the params so there we go but right now of course we're only sending a little string and actually that's also a use case that is okay so we get to the page we got the query Paris all them to whatever now if you've got an object you can also pass this but not as easy as before what you can do is going ahead with json stringify and then using your object this will make the object to our converted to a string and then in the details page you can simply go ahead with Jason Paris so simply reversing the operation and the result of this is that first of all you go to the page you build a string and then as you can see that's the string and then you revert it back to an object so you get everything in here pretty cool pretty easy what as expected the only problem with this solution is what you can see in here and that's also the reason why I don't recommend this although if you're ever might be only running an ionic no as a native application on iOS or Android users will not see the URL bar still I wouldn't know as a developer that we got this ugly mess in the pad and that's not really cool so that's why I say this is a pretty Hecky solution and I wouldn't recommend to use it like this the next two solutions I will present here are actually something I would recommend so both of them are cool so far so solution number two to the problem is using a service and resolving the data and the resolving part is actually just a bit more sugar on top of the idea so our data servers now look like this just an idea you could structure it but however you want basically keeping reference or keeping track of some data in a service and then from outside setting the data and getting the data by an ID it's actually what is recommended in general already so simply passing an ID to the page and then resolving the ID but now we're not making an additional network request but simply storing it inside our service and one thing we need to do for this as well is to create another path so let's make the details pair like this so we can pass an ID to the path as well okay if we're now going to use this we can simply go to the homepage and for our open details with service we would say we were first of all have to inject the private data service data service and then before we make the transition to the next route we say data service set data for whatever ID let's say the idea is 42 and we save the data this is know as an operation you could persist this by using the ionic storage as well in the background and really storing this result so you can later also implement reloading on the page but for now we will keep it simple so we just got it in the cache here and then we say router navigate by your L and we want to details 42 so the page is able to resolve this now normally you would now go to the page the details page you would subscribe to the whatever changes then you get 42 then you call the service and you get the data the problem with this is that the data is then undefined in the beginning that's also the reason why we edit this ng if data up here so if you leave this out you normally get to use a safe navigation operator everywhere because otherwise angular would give you an error message the solution to this problem is actually the resolver and the resolver has one functionality I'll bring this just in so the resource should resolve something sounds pretty reasonable right and the reserve I will now take care of doing exactly what we normally would have in the details page so it will get the ID from the route information param map and then call the service to get the data and now we can apply the resolver function to our route in here and we go ahead by saying resolve and then whatever you want to name the data special and then the data resolver service and this so now whenever we navigate to this path the resolver will catch the ID resolve the data and already injected before the page is even loaded so that means we arrive on the details page and we can simply inside the ng on in it ask if this route snapshot data special is set and in that case simply set it to this data so now we could even did we know we still got this well let's see if it actually works first of all of course the problem what only with ionic surf so now the open works the path looks great details 42 and we were able to resolve the information now we would even be able to remove this because the data will be as I said resolve upfront and once we arrive on the page the data is already there I hope this works now otherwise there will look pretty bad but it works of course so that's a cool way to remove all of the ng ifs or the Elvis operators from your page using the resolver but in general the second approach simply includes using a service that keeps track of the data so setting the data there before you make the navigation and then getting the data from there after the navigation okay and now to tip number three which is using extras State and this is something introduced with angular 7.2 and because we are lucky we are actually using angular 7.2 and I just covered this while looking for a solution to this problem which a lot of you had and it turns out somebody implemented something for this so what we can do as well is using again the first approach but this time simply using a state in here and then let's call this user and then we pass the user object and now we can test the whole object as it is inside the state to the next page we don't have to change anything else so that's all we need and to resolve the data or we can actually go back into the query parameter if this third router is it already included no not data but simply the router get current navigation extras that state so if this one is set and in your case maybe if you only use one solution you don't have to check for it but in that state or in that case we can set it to state that user which is what we defined right here so if we now rule out the application and use our third button we see that we are back on the page with the full object displayed no idea passed everything happened in the background and this is basically the same like you had with ionic three but a little word of warning doing this will after the navigation store the object in the local location cache wherever from angular so if you do this a lot with big objects maybe your performance might decrease so try this out at your own I definitely recommend also the second way which is very clean using the data service perhaps even Edna ionic storage on top of it but basically those two solutions could fix your problem you have right now with migrating your ionic three yet I hope of course you enjoyed this like always if you did hit the like button and also the subscribe button I also got another type of videos on this channel so definitely make sure to check them out check out the other ionic videos and most important subscribe to this channel to receive all for the videos so have a great day do some great coding and and happy coding [Music] you

Channel: Simon Grimm

Views: 39,170

Keywords: ionic, ionic framework, cordova, angular, javascript, html, css, hybrid app, cross platform, ios, android, typescript, web development, ionic 4, ionic 4 tutorial, ionic 4 course, ionic 4 app, ionic 4 for beginners, learn ionic 4, ionic 4 angular, ionic4, angular 7, angular 7 tutorial, learn ionic, ionic for beginners, ionic tutorial, ionic angular, ionic guide, ionic course, ionic 4 data, ionic 4 pages, ionic 4 routing, ionic 4 pass data

Id: XyLcPdv1LKM

Length: 16min 4sec (964 seconds)

Published: Tue Mar 12 2019