ionic-navigation-example
ionic-navigation-example
ionic-navigation-example

This lesson we’re going to cover, how to navigate between 2 pages & passing data between pages.

Core Concept:

Navigation between 2 pages can be done with push & pop concept. where push is moving forward & pop is moving backward

Create new project (Note: you can choose any template such as blank, sidemenu or tab)

ionic start Ionic2Navigation blank

Adding required pages

ionic g page Page2

Note: We’re going to read a data from home page to page2

add new pages to src/app/app.module.ts

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { Page2Page } from '../pages/page2/page2'; // <= Import your page here
@NgModule({
 declarations: [
 MyApp,
 HomePage,
 Page2Page // including component name
 ],
 imports: [
 IonicModule.forRoot(MyApp)
 ],
 bootstrap: [IonicApp],
 entryComponents: [
 MyApp,
 HomePage,
 Page2Page //include component name
 ],
 providers: []
})
export class AppModule {}

Navigating between pages

Working with src/app/pages/home/home.html

<ion-header>
 <ion-navbar>
 <ion-title>Home</ion-title>
 </ion-navbar>
</ion-header>

<ion-content padding>
 <ion-button (click)="gotoPage2()">Goto Page 2</ion-button>
</ion-content>

Explanation: <ion-button> which create a button to your ionic page. (click)="gotoPage2()" used for calling a function from typescript

Working with src/app/pages/home/home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Page2Page } from '../page2/page2'; // <= Import your page here

@Component({
 selector: 'page-home',
 templateUrl: 'home.html'
})
export class HomePage {

 constructor(public navCtrl: NavController) { // <= create a object for NavController

 }

 gotoPage2(){ 
   this.navCtrl.push(Page2Page); // <= it navigates to page 2
 }

}

Explanation: NavController is a component which can handle navigation. we are creating an object for NavController. this.navCtrl.push() used for navigating to next page

Passing Data between pages

Working with src/app/pages/home/home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Page2Page } from '../page2/page2';

@Component({
 selector: 'page-home',
 templateUrl: 'home.html'
})
export class HomePage {

 constructor(public navCtrl: NavController) {

 }

 gotoPage2(){
 this.navCtrl.push(Page2Page, {
 name: "sundaravel",
 age: "24",
 country: "India",
 profilePic: "https://i1.wp.com/phonegappro.com/wp-content/uploads/2015/02/sundaravel.png"
 });
 }

}

Explanation: you can pass data using this.navCtrl.push() 

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular'; // <= Include NavParams

@Component({
 selector: 'page-page2',
 templateUrl: 'page2.html'
})
export class Page2Page {
 userInfo: any; // <= Creating a variable for storing user's data
 constructor(public navCtrl: NavController, public navParams: NavParams) {
 this.userInfo = this.navParams.data; // to get all data from navigation
 console.log(this.navParams.get('name')); //to get single paramenter
 }
}

Explanation: NavParams used for receiving data from navigation.

  • this.navParams.data can read all data from a navigation
  • If you want to get particular data from navigation, you can use this.navParams.get('parameter name')
Sundaravel M

About the author: Hey! It's me sundar. (Yea, I'm the founder of codesundar.com). I'm a passionate computer programmer who loves modern web and mobile development. feel free to reach me : Facebook - Twitter - Google+