How it works...

At a high level, this is how the app is structured:

• The app will Bootstrap via app.ts and load home.html as the root page
• Everything in the /home folder is your first page
• Everything in the /otherPage folder is your second page
• These two pages communicate using NavParams (or navParams from
  the template)

Let's take a look at home.ts. You must import both NavController and NavParams:

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

For your constructor, you need to do a few things, which are as follows:

  public myString: string = 'Example 1 - This is just a string'; 
  public myJSON: any = {text: ''}; 
  otherPage: any = OtherPage; 
 
  constructor(public navCtrl: NavController) { 
  } 

The this.navCtrl variable will reference the imported NavController. You are supposed to bring it in like this in order to use the navigation feature internally. myString and myJSON are just variables that you will pass in the parameter to the second page. You also have to bring in the class for OtherPage and make it accessible to navPush, later in your template.

The gotoOtherPage() method, as shown, does one simple thing: it pushes the page to the current navigation:

  gotoOtherPage() { 
    this.navCtrl.push(OtherPage, {text: 'Example 3 - This is an 
     object'}); 
  } 

By doing so, your app will switch to OtherPage right away, and this will also include the parameters.

The home.html template for the first page demonstrates the following three scenarios:

• You can use [navPush] and [navParams] directly inside the template. You just need to pass the internal object of the class handling this page. So, in this case, you have to pass otherPage and not OtherPage (notice the uppercase O):

<button block [navPush]="otherPage" 
 [navParams]="myString">OtherPage 1</button>

• You can also pass a JSON object as a param into [navPush]:

<button ion-button block color="secondary" 
 [navPush]="otherPage" [navParams]="myJSON">OtherPage 
 2</button>

• The third scenario is to navigate to a new page manually, as shown, using a method implemented inside the page class:

<button block dark (click)="gotoOtherPage()">OtherPage 3</button> 

In your second page, you just need to make NavController and NavParams available in the class from the constructor.

Let's take a look at your otherPage.js file:

constructor(public navCtrl: NavController, public params: NavParams) { 
} 

The template for the second page (that is, otherPage.html) is very simple. First, the navigation bar on the top is to enable the default back button:

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

The back button is an automatic mechanism in Ionic, so you don't have to worry about when it will be shown.

The following code will display the variable content if the state parameter exists:

  <ion-card *ngIf="params.data"> 
    <ion-card-header> 
      params.data 
    </ion-card-header> 
    <ion-card-content> 
      {{ params.data | json }} 
    </ion-card-content> 
  </ion-card>

The ion-card leverages *ngIf to decide whether this DOM should be rendered or not. Since params.data could be a JSON object, you need to convert it to a string to display it on the screen. Angular 1 has filters, but Angular renamed this feature as pipes. However, the basic concept is the same. The {{ params.data | json }} code basically tells Angular to apply the json function to params.data and render the output.

You could go back to the previous page using the nav.pop() function, as shown:

  <button block (click)="goBack()"> 
    goBack() 
  </button> 

Alternatively, you could go back using a directive navPop and put that inside your button, as shown:

  <button block navPop> 
    nav-pop 
  </button> 

So, those are the possibilities within the Ionic navigation features.