67, Obafemi Awolowo way, Ikeja Lagos +234 802 302 0838 info@ionicdon.com

How To Pass Data Between Pages In Ionic 2+ Application

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:

  1. Create an input field and a button on a page in our application
  2. Write a method to pass data from the input field to another page
  3. 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

visual studio home.html

Save you file and run your app.

 

Hey!!, do you have what I have below

ionic serve --l output

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

  1. Import NavParams class from ionic-angular
  2. Declare data and assign it format “any” to accept any data type
  3. Inject NavParam into the constructor
  4. 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

  1. Collect the data from NavParams using GET method in second.ts
  2. 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

This Post Has 6 Comments

  1. Hi, 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

    1. @Gullermo, thank you so much for this observation. the tutorial is now updated with the second.ts in place

  2. tremendous tutorial! clear and simple, but i want to ask u, how can i pass an object between pages?

    1. Hassan, what kind of object did you want to pass

  3. You 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.

  4. It 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.

Leave a Reply

Close Menu