Ionic 2 add page

Now that we have a basic understanding of the layout of an Ionic2 app, let's walk through the process of creating and navigating pages in our app.

First look at src/app/app.html, near the bottom there is the following:

<ion-nav id="nav" [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

Note the [root] property binding. The root page or the first base page where the ion-nav component is set. When ion-nav is loaded, the rootPage variable refers to the root page.

In src/app/app.component.ts, the MyApp component defines it in its constructor. :

...
import {HelloIonicPage} from '../pages/hello-ionic/hello-ionic';
...

export class MyApp {
  ...

  // make HelloIonicPage the root (or first) page
  rootPage: any = HelloIonicPage;
  pages: Array<{title: string, component: any}>;

    constructor(
      private platform: Platform,
      private menu: MenuController
    ) {
    ...
  }

  ...
}

We can see that the rootPage is set to HelloIonicPage, so HelloIonicPage will be the first page loaded in the nav controller. Let's take a look.

Create page

Next we look at the imported HelloIonicPage. In the src/pages/hello-ionic/ directory, open the hello-ionic.ts file.

You may have noticed that each page has a table of contents. In each directory there are two other .html and .scss files with the same name. For example, in hello-ionic/ there are three files hello-ionic.ts, hello-ionic.html and hello-ionic.scss. Although this is not a required pattern, it is helpful for organizing code.

Below, we see the HelloIonicPage class. This will create a page that provides an Angular component with all the Ionic directives, loading the navigation system using Ionic. Note that because the pages are dynamically loaded, they don't have selectors:

import {Component} from '@angular/core';

@Component({
  templateUrl: 'build/pages/hello-ionic/hello-ionic.html'
})
export class HelloIonicPage {}

All pages have a class, and an associated template compilation. Let's take a look at src/pages/hello-ionic/hello-ionic.html - the template file for this page:

<ion-header>
  <ion-navbar>
    <button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Hello Ionic</ion-title>
  </ion-navbar>
</ion-header>


<ion-content padding class="getting-started">

  <h3>Welcome to your first Ionic app!</h3>

  <p>
    This starter project is our way of helping you get a functional app running in record time.
  </p>
  <p>
    Follow along on the tutorial section of the Ionic docs!
  </p>
  <p>
    <button primary menuToggle>Toggle Menu</button>
  </p>

</ion-content>

<ion-navbar> is the navigation bar template for this page. When we navigate to this page, the buttons and title on the navigation bar transition together as part of the page.
The rest of the template is standard Ionic code to set up the content area and print the welcome message.

Create additional pages

To create the additional page, we just need to make sure the title and other things we want the navigation bar to show are set correctly.
Let's take a look at the contents of src/pages/list/list.ts and you will find that a new page is defined:

import {Component} from "@angular/core";
import {NavController, NavParams} from 'ionic-angular';
import {ItemDetailsPage} from '../item-details/item-details';


@Component({
  templateUrl: 'build/pages/list/list.html'
})
export class ListPage {
  selectedItem: any;
  icons: string[];
  items: Array<{title: string, note: string, icon: string}>;

  constructor(private navCtrl: NavController, navParams: NavParams) {
    // If we navigated to this page, we will have an item available as a nav param
    this.selectedItem = navParams.get('item');

    this.icons = ['flask', 'wifi', 'beer', 'football', 'basketball', 'paper-plane',
    'american-football', 'boat', 'bluetooth', 'build'];

    this.items = [];
    for(let i = 1; i < 11; i++) {
      this.items.push({
        title: 'Item ' + i,
        note: 'This is item #' + i,
        icon: this.icons[Math.floor(Math.random() * this.icons.length)]
      });
    }
  }

  itemTapped(event, item) {
     this.navCtrl.push(ItemDetailsPage, {
       item: item
     });
  }
}

This page creates a list page with multiple data items. All in all, this page is very similar to the previous HelloIonicPage.