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.
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:
https://gist.github.com/a2080fdc4ff396210d9b1f601518562a
Create a new about page:
https://gist.github.com/a08dfb9f4095d579879caea4c516dc36
And lastly, to complete our setup, we must add about page in the app module:
https://gist.github.com/80499f22aae3070fbb17a75d18082792
Then we will update home.html:
https://gist.github.com/5288c0d0c020206807163d9bce763a4a
#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:
https://gist.github.com/faac1308bc43453249fd7cb5c8012855
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.
https://gist.github.com/749dacf1859698f25ec196492f8d8c6c
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 AboutPage class.
Finally, to display data on about page:
https://gist.github.com/fd5e7e50d5f104336dcd396ab7c30555
Here are some screenshots:
Home Page:
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.