Passing Data to Ionic Modals, Pages & Popover [v4]

ionic-4-pass-data-navigation

Every Ionic app consist of different pages and a solid navigation is crucial for your app. With Ionic 4 the routing changed to the standard Angular router and there are different ways to show pages and modals.

In this Quick Win we will look at the different options to push pages onto our navigation stack by using the routing system but also how to use other forms like a modal or popover.

ionic-4-navigation-params

Finally we will also make sure that we can pass data to those new pages so we can display the detailed information or whatever the page needs to display based on the user selection.

Starting our Navigation App Example

To get started we create a blank new Ionic 4 app (currently with the beta, might change later) and add a few pages that we can navigate to:

Are you ready to start learning?

Join the Ionic Academy

After creating the pages the information will be automatically added to our routing file but we don’t need it for all the created pages in this example.

Also, we want to be able to pass an id to the second page so we just append a placeholder to the URL path which we can later fill and then access inside that page.

Therefore go ahead and change your app/app-routing.module.ts to:

Normally we can use lazy loading for all the pages, but for the modal and popover the pages are more or less out of the routing scope as they will be displayed in a special way without changing the URL. At the time writing this we also can’t call them with their name (like in v3) therefore we have to make them available to our app by adding them to our app/app.module.ts:

Now we can continue with our routing and data passing example as everything is connected and prepared.

Opening Pages, Modal & Popover

First of all we need a bunch of buttons to call our different functions for displaying the various elements.

The most interesting part might be the routerLink for the first button which is one way to open/push a new page. By constructing the route with the value the internal routing can look it up in our previous routing URLs and then display the correct page!

Besides that we add an input for the value that we want to pass through to our pages later.

Now go ahead and change your app/home/home.page.html to:

Now it’s time to implement the three different functions:

  • pushPage: Using the NavController new function navigateForward which does the same like we did with the routerLink like before
  • openModal: Using the ModalController like always but with the new async way. We also pass the information to the modal by using componentProps
  • openPopover: Using the PopoverController like a modal and also the componentProps for value passed but also an additional ev which helps to position the popover correctly

This will then allow us to use the different pages so change your app/home/home.page.ts to:

Now we examine the three different cases and see how to get the data we passed to them.

Pages with Routing Path

For pages where we use the standard routing we can simply grab the information from the URL by using the ActivatedRoute inside our initialiser.

At this point it doesn’t matter how we called the path, the information is included. While we previously also passed whole objects sometimes, for this routing you shouldn’t include objects in the path!

The best way to pass information is to simply pass an id or whatever you need to resolve some information with an additional provider.

For now go ahead and change your app/pages/second.page.ts to:

The according view for this page just displays the passed value and a back button inside the header so we can always go back to the previous home page so change your app/pages/second.page.hmtl to:

That’s it for the standard pages, now on to the special cases.

Modal Pages

Our modal page will be displayed above our content and we have passed the information to the page, now we can access this information almost like we did in v3.

For the view we again only need some basic elements for our test so change the app/pages/modal.page.html to:

Inside the modal we can now inject the NavParams and grab the id that we have previously set as custom_id, so apply these changes to the app/pages/modal.page.ts:

Popover Pages

The popover works technically like the modal, but for the view we only need a few elements which are displayed most of the time as a list like this inside the app/pages/popover/popover.page.html:

To finish things up we need to make the same changes to our app/pages/popover/popover.page.ts like we did to our modal because we can use the NavParams again:

We’ve also added another function do close the popover from code in case you need to hide it after a user has selected an entry!

And that’s how to use pages, modals and the popover with Ionic 4 to display different pages with data passed to them. Make sure that you are not using big objects inside the URL for pages but otherwise you can do mostly the same like you did with Ionic 3!

You can also find a video version of this Quick Win below.

Tweet
Reddit
+1
Share50
Email
50 Shares