How to pass Data to Ionic 4 Modals, Pages & Popover

[Music] hey everyone what's up this assignment from the ionic Academy in this video I will show you how you can use ionic 4 and different routing mechanisms so we will implement routing for us then pages with a path we will add mobile pages and we will also use the popover page and also we will see how we can pass data to the different types of pages in our app because some things have changed some are still more or less the same but we will see how all of this works inside our example app in the end so let's get to it I've already created a blank new ionic app and I'm currently using the beta version so I have to specify - - type in your lab to create the project once you're in your project you can go ahead and simply say ionic generate page pages second so we just add a few pages for our app so second page a modal page and finally also a popover page okay great so now I will start my ionic serve in the background and we can continue first of all let's check our routine because ok thanks coming up let's see ok because when you generate the pages they will be automatically added to the rule a routine with their name and we actually don't need the rooting for the modal and the pop of our page so remove that and also for the second page we want to pass some parameters through with the ID and therefore we change this to include my ID and that's what we're going to set in our pages when we navigate to the second page then okay back to the epidural where we also need a minor change because the mobile page and the popover page are moral a bit out of the scope of our app they don't really have a path we need to include them here and later on call them with the create function of the modal control or popover controller perhaps those things might change so currently you can only really use the component maybe with lazy loading implemented for them it might work in the future so give it a try then but from now if it's not included you need to include the modal page module and also the popover page module alright so let's go to our home page in the home page we basically need a few buttons let's call this ion params and an input so we can set a value that we then passed you the following pages model whatever it will be so let's call this value and if you want you can also add something like clear input which automatically shows this little clear icon and perhaps wrap everything inside an eye on item so then we need a bunch of buttons now we'll give them expand full so previously was only full but perhaps I should stop the references to the old I on a version now let's do let's finish them and then add the functions so we will have different ways to push pages modeled popovers whatever so this will be just like before with a click event which calls push page and let's just call this push with function then we want to show our mold so let's call this open modal and also we assign a click function open modal and finally the last one is open pop over and this one again click open pop over and here we also passed the click event in so the pop over can be placed correctly on the screen now I have left out this one because I want to push the second page with Ruta so those two will actually have the same effect but they will work differently and for this you can use directly the rutile link in here and you just create an array of segments of the URL so in our case first one is second and then value so let's see why if we go back to the up routine we see that this is the pest for the second page and this is what we want to create with this root of x so we create a link to / second slash value those will be constructed together and then we will be on the second page and as the root Slayer link is not always certain in which direction we are navigating we can also add rooted Direction forward so then the root uh knows it's a forward navigation the next day the next page will be pushed onto our stick of pages so let's add the functions push page open modal and open pop over with the vent all right and also we don't have a constructor so let's change this inside the constructor we now need a few dependencies so what we need first is the nuf controller it looks like the navigation controller from ionic 3 but it will actually work a bit different we need of course the modal controller and today I learned that there's actually no difference because in the documentation previously it was always like this and now it is controller it's just more user friendly if we write the name out especially for beginners but of course you can also call this like we did previously and finally the pup over control of controller and there we go so now let's take a look with a push page we want to push to the next page previously we would have done something like this there's enough push next page now we see that actually no push but only go back go forward go root which are more or less the same like before so we will use go forward if we want to push to a new page and then we just say the same URL we used with a root a link and now let's add value here and then they start value and close it so now this has exactly the same effect like using our root a link with this command so different ways to use it choose whatever you like for the molo it's a bit different first of all we have to use it a bit different with essing and wait but no problem we just await the creation of our modal controller and in here we first of all need two loops pass the component and the component was previously sometimes just a string name of the page with lazy loading and this is what currently is not working as far as I know but still I'm on beta one currently so be aware perhaps it's working already therefore I need to use modal page and it is imported here and that's also the reason we have it in the top module so it is available at this point if we want to pass some options to the next page we can use the component props for this and therefore we can set whatever we like and we want to pass our own custom value to the next page so we await until the model is finished and then we can also call wait mobile present but I think we actually don't need another wait in here and now for the pop over it's actually mostly the same it's pop over control I create the component is now of course the popover page the component props and let's call this popover what's wrong why do you complain I think just because the event is missing yes so the event is what you pass into the popover creation so the page knows where to position the popover and then of course same like before present and we can again use the component props ok so we have the creation in place and actually the routine should already work we can go to the second page we can again go to the second page we can open the modal we can not go back and we can open the popover perfect now the second part is to go to all of those pages and grep the data we have tested it so therefore let's start with our second page for this we have the path and remember the route in place where we can grab the information to do so we had activated route activated route and again make sure your import path is like this and then inside your energy on in it I will just always make this one now here we can set our idea to the activated route snapshot Terra map that get so a bit tricky and my ID which is exactly the totin you have used in here so you could also have another ID and again more so you can pass all kinds of information here but be aware that you don't really want to send JSON objects to the next page because yes you can call json stringify on your objects and then append them to the path but that actually looks very bad so therefore just send the ID have a service that can resolve the ID to the object and then everything works a lot better so the HTML for that page is actually not super interesting we just want to give out the ID and perhaps this part might be interesting so the back button is not by default edit once you go to the next page we have to do it on our own and we can also set default href if you want to which will then be displayed even if you start on that page so let's see I can change this to whatever and now I get to the second page I got the back button and it works again with both and as you can see this is now the URL and even if I go back head this and load this we get the back button because we have said the default href for the back button now of course it's zero again but again all the information is passed to the page on two different ways pick what works for you oh okay so now on to the mall and the model and pop over are again more or less the same because we can use the private enough params and is what we did with ionic three a lot all the information to the pages bought past with this information so past ID null again and then simply say past ID this enough params get and I think it was custom ID I passed to that page so give this out and inside the view again not really super interesting I'll just add this and also have a footer with a closed model button so not in the header bar I just wanted to do something different in this example because otherwise it would be too boring and too close the model again we can inject the modal controller a little controller and then simply go ahead this molar controller dismiss and also as you can see we can also say get top which will give us the most top or whatever model that is active if you are working with multiple molds but in our case we only have one so calling this miss should work and let's see we change the ID and we open it and there's the ID in close and as you can see compared to the regular pages where we got the information in the URL the model is actually out of the scope lying above our page so no routing information there we can simply use the knife params okay finally the popover in here again private enough params enough params now the import is right very strange and just like we did before with a modal controller you can do the same with the popover controller so if you inject it here you could have a function hello's puffs over which calls popover controller dismissed and again if you have multiple popovers make sure you get the right one past ID is no and then come on let me copy this like this same again now for the view of a popover page a popover is actually not using this header and content stuff you just have whatever you put in there most of the time it will be an ion list with items so I added this dummy I can item and also the popover button so let's save this once again and there we go our popover is opened from the button we see the ID which we can also change we can also click on the background to dismiss it but we can also hit the button so this would be useful if there's a popover or you select an entry and then you want to dismiss the popover from code okay once again push with root a link at the information to the URL push with a function still uses the root a link in the error in the URL bar modal out of scope use enough params and popover also out of scope use nuff poems alright so that's how you can create show and pass data to different pages models and popovers with ionic for some things have changed but most of the time everything still works like you expected only make sure that you don't put your big objects into the URL path which will look really ugly although you don't see it on a device it's not really best practice to do it like this simply push the ID for whatever detail of list item and then have a service that can get you the object for a specific ID perhaps use a resource service there's another toriel on this inside the ioniq academy so check that out on how to use a resolver i hope you enjoyed this video it's actually one of the hottest days in germany so i'm happy i could finish this video in time without breaking together I hope you enjoy ionic 4 just as I do and if you do make sure to check out the ionic academy comm which is my own coding school with ionic courses project and a great community to help you learn ionic as fast as possible so I'd love to see you inside and of course inside the next video so have a great day and take care [Music]

Channel: Simon Grimm

Views: 56,264

Keywords: 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, angular, ionic tutorial, ionic framework, ionic angular, ionic guide, cross platform, hybrid app, ionic course, ionic, cordova, javascript, ionic modal, ionic routing, ionic popover, ionic pages, ionic 4 page data, ionic pass data

Id: jRxPOs1OM34

Length: 17min 57sec (1077 seconds)

Published: Fri Sep 14 2018