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.


ionic-academy-start

You must be a Member to view this Quick Win

Access all courses and lessons, track your progress, connect with Developers & build awesome Ionic Apps.


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

  1. Fernando Herrera says:

    The last video isn’t working… besides that, it is good tutorial

  2. Daniel says:

    ERROR Error: Uncaught (in promise): overlay does not exist

    not working close modal

  3. KniL says:

    This tutorial is wrong, the NavParams component to pass data to the second page doesn’t exists in Ionic v4 :/

    1. You mean the componentProps for the Modal? Were they removed in a later release as well? Or at which point is your code failing?

      1. keshav godani says:

        pushPage() {
        this.nav.navigateForward(/second/${this.value});
        }

        this is not working in ionic v4
        please tell me to pass data to next page… other way

        value not passing “this.value” with this using

        1. You can only use strings in the URL. You can’t put a whole object in the URL anymore like you did before. So pass an ID and use a service to resolve your details information then!

          1. keshav godani says:

            Please tell me how give example for use this

          2. keshav godani says:

            Please tell me how give example for use this

Leave a Reply

Your email address will not be published. Required fields are marked *