Ionic 2 Beginner : Navigating Between Pages With Parameters

Share on FacebookTweet about this on TwitterShare on Google+Share on RedditShare on StumbleUponDigg thisFlattr the authorPin on PinterestShare on TumblrShare on LinkedInPrint this pageBuffer this page

In this tutorial I will show you how you can navigate as well as pass parameters between pages in Ionic 2. In my previous tutorial, we learned how to create custom pages. Keeping what we have learned so far in mind from the previous tutorial we will create a button on our home page which when clicked will pass some parameters as well as navigate us to the second page.

Step 1)

We will start off by creating a new page, we know how we can do that in my other tutorial on How to create Pages in Ionic 2

To create a new page in Ionic 2 issue the following command

 

Step 2)

We will create a button in the home component which will be used to navigate. So first let’s create the button in HTML. In src\app\pages\home\home.html we will create the button as follows

Step 3)

Now we will wire up the navigate() function in src\app\home\home.ts file as follows,

 

Here we are first are importing the Component as well as navController. We will also import the next view/page that we created in the previous post which is Other and point to the other component ../other/other. Notice that the path is relative to the current page.

In our Constructor function we are making use of NavController by doing navCtrl:navController.

Inside of our navigate() function we are pushing a new page in the nav stack by doing navCtrl.push() we are passing two things, first a page to go to which is Other and second an object with keysfirstPassed and secondPassed with values value 1 and value 2 .

 

Step 4)

In our other.ts file we will need to receive the passes parameters and bind then to the page context we do that the following way

Notice that we are importing NavParams which will contain the parameters and we are using them inside of our constructor and binding it to the page. Inside the constructor() we are using the params.get() function to get the passed parameters.

 

Step 5)

Now all that there is left to do is to display the values in src\pages\other\other.html

 

Step 6)

We now need to add the other component that we created to src\app\app.module.ts as follows.

It is important to add the other component to declarations array as well as the entryComponents array otherwise Ionic will not recognize the component. Ready more about entryComponents here.

 

Download Code:


Code Will Be Sent Via Email

 

Conclusion

In this tutorial, you saw how you can navigate between components and pass paraments as well. Make sure you register the component in the app.module.ts file, without doing so Ionic 2 will throw an error saying that it does not know about the component.

 

Leave Me Your Questions And Feedback

Getting your feedback inspires me the most so hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @pointDeveloper

 

 

Consider Subscribing / Donating
Subscribe To Mailing List
Donate
If my site was helpful to you, then please consider donating via paypal:

Prantik Vaghela (pointdeveloper)

Hi my name is Prantik Vaghela. I have done my Bachelors and Masters in Computer Science and am a web developer and now a Tutor through my blog. :-)

  • Pingback: Ionic 2 Beginner : Creating pages / Components In Ionic 2 - pointDeveloper.com()

  • Sebastian Tobiasz

    would you have this code available on GitHub

    • hey there,
      thanks for reminding me i totally forgot to add the code on git.
      The post has been updated and link to the code has been added.

      -Thanks 🙂

      • Sebastian Tobiasz

        I’m trying to find a working example of a 2 page app that switches pages after clicking a button. Do you happen do have one of those for ionic 2.0 beta ?

        • yes its on git here..https://github.com/pointdeveloper/ionic-2-navigate-with-parameters

          Create a new app in ionic 2 and then replace the app folder on your computer with the app folder from git then it will work…
          A thing to keep in mind is that ionic 2 in the past month or so has changed some module names and class names

          (for example )

          Previously it was
          import {Page,Platform } from ‘ionic/ionic’;

          and now it is
          import {Page,Platform } from ‘ionic-framework/ionic’;

          I have updated the code in the post and the git repo. If things do not work that might have caused the problem.

          -Regards

          • Sebastian Tobiasz

            I tried doing what you said and it still doesn’t compile

            https://github.com/NeonLight118/ionic2.git

          • i used your code you have to do the following change inside the app/app.js file

            change
            import {App, Platform} from ‘ionic/ionic’;

            To this

            import {App, Platform} from ‘ionic-framework/ionic’;

            It works i checked. Try it and let me know

          • Sebastian Tobiasz

            nothing, I’ve included the output and errors that came up in pictures below. I am using visual studio because it is “soppowstu” install all the tools for me automatically.

          • form the errors it seems it if is using the ripple emulator…As ionic 2 is still in Beta version as i mentioned things change and it might be the reason for the problem.

            I checked the code that is in the post and found that it works.
            So i suggest you use the ionic CLI to build and run your apps.

            Thanks

  • Varshil Shah

    hey i got error in import statement

    import {Page, Platform, NavParams} from ‘ionic-framework/ionic’;

    can not find module ‘ionic-framework/ionic’;

    • hey thanks for commenting,

      The new Ionic update uses ‘@angular/core’; and ‘ionic-angular’; components instead of ‘ionic-framework/ionic’;

      The post has been updated with new code.

      Let me know if you still have issues.

      -Regards

  • Nirmal Goswami

    Very Nice

  • Berkhan

    Ty bro, and u should edit step3. codes seening like normal text.

    • Hey Berkhan thanks for the feedback.

      I have updated the post, now the code appears highlighted. No idea how that happen, probably updating the theme or plugin caused this.

      Thanks a lot,

      -Prantik