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 ...

Get Ionic Cookbook - Third Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.