In the previous posts, we have seen . 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 class to transfer data from one page to another. how to setup a basic navigation between multiple Ionic app Pages NavParams 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 : home.html 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 with business logic behind the only click event in our template: #color home.ts Note the second argument in which is being used to pass the data. this.navCtrl.push() About Page To Pass data from Home page to About page we will need to import class. Since, I am using Ionic CLI to generate pages, class will already be imported in the about page. NavParams NavParams Display Fetched Data To catch the data from the previous page in the navigation stack, we are using method of class. We fetch data inside the constructor function of class. get() NavParams AboutPage Finally, to display data on about page: Summary 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 Want to read more articles like this one? Subscribe here . Sometimes, I send “never seen before” content to my subscribers. If you like this article, please clap 👏 . Thank you!

Fetch

Setup Nodemon to auto restart Nodejs application server

Multi Page Navigation in an Ionic App

Newsletter

Portfolio

Nominated for 2022 - HackerNoon Contributor of the Year - Low Code

Nominated for 2022 - Most Authentic Developer Advocate of the Year

Too Long; Didn't Read

Make resilience your competitive advantage

Passing Data Between Pages in an Ionic Application

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

5 things I learnt from Steal Like An Artist

15 Must-Have Resources for Ionic App Developers

A Practical solution for CORS (Cross-Origin Resource Sharing) issues in IONIC 3 and Cordova

Get Started with Ionic 3 and Mobile Apps Today

Getting started with Ionic 2 by building a Markdown App

5 things I learnt from Steal Like An Artist

15 Must-Have Resources for Ionic App Developers

A Practical solution for CORS (Cross-Origin Resource Sharing) issues in IONIC 3 and Cordova

Get Started with Ionic 3 and Mobile Apps Today

Getting started with Ionic 2 by building a Markdown App

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps