Skip to main content

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)

Let’s start off by creating a new ionic project we do that by running the following command in terminal/command prompt

 

Step 2)

Now we will be 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 3)

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\pages\home\home.html we will create the button as follows

Step 4)

Now we will wire up the navigate() function in src\pages\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 5)

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 6)

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

{{firstParam}}

 

{{secondParam}}

<button ion-button (click)=”goBack()”>back</button> </ion-content>

 

Step 7)

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. :-)

%d bloggers like this: