Navigation multiple page with state parameter

Navigation is very important for user experience. The user can move from one page to another page. What would happen when a user submits a form or after moving to another page with data. We have to ensure that data is reached at the intended page with correct state of data without modifying. When the app starts running, it bootstrap via app.ts and load home.html as the root page. Page’s are communicated with NavController and NavParams.
In our app we have the Home page with another page, in this example, we are passing data to the same page with different methods. The Home page has three buttons, each will use the different method.
In this example, we are learning

  1. How to use NavController and NavParams.
  2. How to use [navPush] and [navParams] in the template.
  3. How to use the pipe to convert a JSON to a string and render it on the screen.

Step 1: ionic start Navigation blank –v2
Step 2: Add the following code in home.html

<ion-header> ... Home ... </ion-header>
 
<ion-content padding>
  <ion-card>
    <ion-card-header>
      NavPush 1
    </ion-card-header>
    <ion-card-content>
      <p> Use both <code>navPush</code> and <code>navsParams</code></p>
      <button ion-button block [navPush] = "otherPage" [navParams] ="myString">Other Page 1</button>
    </ion-card-content>
  </ion-card>
 
  <ion-card>
    <ion-card-header>
      NavPush 2
    </ion-card-header>
    <ion-card-content>
      <p> Use only <code>navPush</code> and pass an array instead</p>
      <ion-list>
        <ion-item>
          <ion-label floating>Name</ion-label>
          <ion-input type="text" [(ngModel)] = "myJSON.text"></ion-input>
        </ion-item>
      </ion-list>
      <div>
        <button ion-buton block  color="primary" [navPush]="otherPage" [navParams]="myJSON">Other Page 2</button>
      </div>
    </ion-card-content>
  </ion-card>
 
  <ion-card>
    <ion-card-header>
      NavPush 3
    </ion-card-header>
    <ion-card-content>
      <p> Use click event to tigger <code>nav.push</code> in Typescript</p>
      <button ion-button block color="dark" (click) = "gotoOtherPage()">Other Page 3</button>
    </ion-card-content>
  </ion-card>
 
</ion-content>

In home.html for our first button, we use [navPush] and [navParams] inside the template, we have to pass the reference of otherPage object but OtherPage class. In the first button, we are not calling any method of homets as [navPush] = “otherPage” [navParams] =”myString” this value are inside a button. We passing page name and parameter values as myString.

Step 3: Add the following code in home.ts

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { OtherPage } from '../other-page/other-page';
 
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  public myString: string = 'Example 1 - This is just a string';
  public myJSON: any = {text: ''};
  otherPage: any = OtherPage;
 
  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }
   
  gotoOtherPage(){
    this.navCtrl.push(OtherPage, {text: 'Example 3 - This is an object'});
  }
}

In this image first is using [navPush] and [navParams] passing myString value, In the second image, we are using the same method as first navigation with only change in parameter JSON instead of myString. In the last example, we are calling a function through clicking button event, which will call gotoOtherPage() method of homePage Class. Inside this method, we are using this.navCtrl.push(OtherPage, {text: ‘Example 3 – This is an object’});

Step 4: Create other page called otherPage.html with the following code.

<ion-header>
  <ion-navbar color="primary">
    <ion-title>otherPage</ion-title>
  </ion-navbar>
</ion-header>
 
<ion-content>
  <ion-card *ngIf="navParams.data">
    <ion-card-header>
      navParams.data
    </ion-card-header>
    <ion-card-content>
      {{ navParams.data | json }}
    </ion-card-content>
  </ion-card>
   
  <button ion-button block (click)="goBack()">
    goBack()
  </button>
  <button ion-button full nav-pop>
    nav-pop
  </button>
</ion-content>

In otherPage.html we have {{ navParams.data | json }} code, here we are applying pipe to navParams.data source to call json function to render output in json.

Step 5: Add the following code in otherPage.ts

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
 
@Component({
  selector: 'other-page',
  templateUrl: 'other-page.html'
})
export class OtherPage{
  data: any;
 
  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }
 
  goBack(){
    this.navCtrl.pop();
  }
 
  ionViewDidLoad() {
    console.log('ionViewDidLoad OtherPage');
  }
}

We don’t have to write any code to navigate back to the home page. In Ionic-2 will automatically handle navigation back to source page as ionic we are using the stack for navigation. But for just demo purpose we are adding few methods to go back to source page as.
1. Add this code in otherPage.ts
goBack(){
   this.navCtrl.pop();
}

2. Add following code in otherPage.html

nav-pop

Where 2 methods are not working as for now.

We need to import both home and otherPage in app.module.ts, add both references in declaration and entryComponent.