Navigating & Passing Data Between Pages in Ionic 2

In Ionic you get a class named NavController to navigate between pages, and one named NavParams to get data from the page you navigated from.

You start by importing NavController as well as the class of the page you’ll be navigating to in your starting component/page:

Component: something.ts

import { NavController } from 'ionic-angular';
import { SomethingElsePage }
     from '../something-else/something-else';

Then you inject NavController in your component’s class constructor:

Component: something.ts

constructor(public navCtrl: NavController) {}

And now let’s say that your page template has a button like this:

Template: something.html

<button ion-button (click)="goToSomethingElse()">

Then your component would have a goToSomethingElse() method like this:

Component: something.ts

goToSomethingElse() {
    this.navCtrl.push(SomethingElsePage);
}

In the SomethingElsePage component you’d use NavController’s pop to go back to the previous view:

Component: something-else.ts

goBack() {
    this.navCtrl.pop();
}

goToSomethingElse(payload) {
    this.navCtrl.push(SomethingElsePage, payload);
}

import { NavController, NavParams } from 'ionic-angular';

...

ketchup: string = this.navParams.get('ketchup');