In this tutorial, we are going to pass data from one page to another, to achieve this we are going to follow the following steps:
- Create an input field and a button on a page in our application
- Write a method to pass data from the input field to another page
- Display the data passed form the first page on the second page
Prerequisite
To follow along in this tutorial, I will advise you go through our earlier tutorial on How to Navigate Between Pages in Ionic 2+ Application, because this tutorial is a continuation of the said tutorial. But if you are familiar with navigating form one page to another you can come along.
1. Create an input field and a button on a page in our application
Open your favorite code editor, as for me I’m using Visual Studio Code, you know why?, it is free and awesome!!
Open home.html and replace the everything within <ion-content> </ion-content> tag with the following code
<ion-input type=”text” placeholder=”Enter your data here” name=””data” [(ngModel)]=”data”> </ion-input>
<button ion-button block (click)=”goToSecondPage()”> SUBMIT </button>
At the end, your home.html will look like the diagram below
Save you file and run your app.
Hey!!, do you have what I have below
You really have what’s up here? That’s great! Give yourself are treat, seriously have it on me
Now let’s move on
2. Write a method to pass data from the input field to another page
To pass your data from input field created in step 1 above, you need to do the following
- Import NavParams class from ionic-angular
- Declare data and assign it format “any” to accept any data type
- Inject NavParam into the constructor
- Write a method to pass data while navigating to second page
Open home.ts file on your code editor, add the highlighted step as explained below
1. Import NavParams class from ionic-angular
import {NavParams} form ’@angular/core’;
2.Declare data and assign it format “any” to accept any data format
data:any;
3. Inject NavParams into the constructor
constructor(public params: NavParams)
4. Write a method to pass data while navigating to second page
goToSecondPage(){
let inputData = {
data:this.data
}
this.navCtrl.push(SecondPage inputData);
}
With all the four step successfully completed, your home.ts will look like the diagram below
3. Display the data passed form the first page on the second page
To implement this step, you will also need to take another two steps
- Collect the data from NavParams using GET method in second.ts
- Display data collected in second.html
To achieve the above steps, open second.ts
Note that you neither need to import NavParams class nor inject NavParams service in the constructor, in the second.ts file, it’s automatically added when you create your page using CLI ( see How to Navigate Between Pages in Ionic 2+ Application)
All you need to do is to declare data and assign it format “any” to accept any data type as thus
data:any;
then, collect data from NavParams and assign it to the data declared in the above step when page initializes as thus
ngOnInit(){
this.data = this.params.get(‘data’);
}
If the above steps are successfully completed, your second.ts will look like the diagram below
2. Display data collected in second.html
Open second.html file and replace the everything within <ion-content> </ion-content> tag with the following code
<h2> Your input data is </h2><h1> {{data}} </h1>
At the end, your second.html will look like the diagram below
That’s all, well done but before you rest your back, run you application and see if you have this.
You do?
Let me hear from you that you really do by posting a comment
Guillermo
13 Aug 2018Hi, I’m from Argentina, I apologize for my limited English. Just start with Ionic 3 and I’m following your tutorials carefully, they are excellent, thank you very much!
I just wanted to tell you that in the tutorial ‘https://ionicdon.com/pass-data-one-page-another-ionic-2-application/’ you include second.html instead of second.ts
adminion
13 Aug 2018@Gullermo, thank you so much for this observation. the tutorial is now updated with the second.ts in place
Hasan
19 Aug 2018tremendous tutorial! clear and simple, but i want to ask u, how can i pass an object between pages?
adminion
23 Aug 2018Hassan, what kind of object did you want to pass
Etsuko Labossiere
20 Aug 2018You made some first rate points there. I seemed on the web for the issue and found most people will go along with together with your website.
zvodretiluret
29 Sep 2018It is truly a nice and useful piece of info. I’m glad that you just shared this useful information with us. Please stay us up to date like this. Thank you for sharing.