Ionic Navigation

ionic-navigation-tutorial

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 {}

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')