In the previous posts, we have seen how to setup a basic navigation between multiple Ionic app Pages. This post concerns what if you want to send some data from the previous page to the next page in the stack? For the Ionic provides
NavParams class to transfer data from one page to another.
Generate the application
In this demo application we will first setup a home page with a text box to enter data that will be transfered to the next page. First, let’s generate a new Ionic application:
Create a new about page:
And lastly, to complete our setup, we must add about page in the app module:
Add Input Text in Home Page
Then we will update
#color is a local variable whose value we will be referencing to pass on to the next page in our navigation stack. We will now update our
home.ts with business logic behind the only click event in our template:
Note the second argument in
this.navCtrl.push() which is being used to pass the data.
To Pass data from Home page to About page we will need to import
NavParams class. Since, I am using Ionic CLI to generate pages, class
NavParams will already be imported in the about page.
Display Fetched Data
To catch the data from the previous page in the navigation stack, we are using
get() method of
NavParams class. We fetch data inside the constructor function of
Finally, to display data on about page:
Here are some screenshots:
User Input being entered:
Data passed form Home Page displayed on About Page:
When nothing entered in the input field, a default text passed and displayed:
To get the full code of this demo app, you can visit this Github Repository.
Want to read more articles like this one? Subscribe here. Sometimes, I send “never seen before” content to my subscribers.