The Official Ionic Blog

Build amazing native and progressive web apps with HTML5

navigation push pop

Getting up and running with Ionic 2 using the Ionic CLI is super simple for anyone with web development experience. In our first article 10 Minutes with Ionic 2: Hello World, we looked at the basics of creating your first app. In this article, we’ll build on what we learned there and add multiple pages with navigation between them.

Ionic Start

We’ll start by creating an app with the blank template using ionic start.

ionic start navigationApp blank --v2 --ts

As described in the first post of this series, we now have some basic plumbing, including a home page.

Default File Structure

Creating a New Page

Let’s look at adding a new page. While we could create all the structure and files manually to create our new page, the CLI makes this significantly easier by providing automatic page generation using ionic g. After changing into the project directory (cd navigationApp), let’s create a new page called about using the CLI.

ionic g page about

The CLI will generate the HTML, TypeScript, and SCSS files for your new page in a new directory under app\pages.

Ionic Generate
New project structure with about page

Navigating From Home to About

To navigate from our home page to our about page, we will need to import our AboutPage class into our home.ts file for use in our HomePage class.

import {AboutPage} from '../about/about';

Next, we should add a constructor to our HomePage class and assign our AboutPage to a property so we can use it in our template.

import {Page} from 'ionic-angular';
import {AboutPage} from '../about/about';

@Page({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  aboutPage = AboutPage;

  constructor(){

  }
}

Next in our home template, we can add a button with NavPush and pass our aboutPage property.

<ion-card-content>
  Hello World<br />

  <button [navPush]="aboutPage">Go To About</button>
</ion-card-content>

And we’ll add some content to our about template:

<ion-content padding class="about">
  This is my super awesome about page.
</ion-content>

Serve

Next, in the CLI, we’ll run ionic serve to view our app in the browser:

ionic serve

You should end up with something similar to the following in your browser:

Screenshot of Browser Output

Conclusion

In under ten minutes, you can add new pages and navigation incredibly easily, using the power of the Ionic CLI. These patterns allow us to rapidly develop and add new components to our next big app!

  • olavocneto

    Very good, clear and simple. Thank you. ++post -> Here the link, http://ionicframework.com/docs/v2/api/components/nav/NavPush/, to the documentation that shows how to pass parameters. It’s common.

  • Fabrício Silva

    I suggest you to elaborate further on each post. What about pop and parameters? Although the post title is “pages and navigation”, only one child topic (push) was presented.

    • http://www.mcgivery.com/ Andrew McGivery

      Hello Fabrício,

      The purpose of this series is to provide quick, bite-sized lessons that can be digested in under 10 minutes. We will be covering more (such as pop and parameters) in further posts in the series.

  • DarthDie

    I had no clue about the CLI having a create page command, nor the [navPush] feature. Nifty!

    • http://www.mcgivery.com/ Andrew McGivery

      Glad you learned something!

  • Fernando

    Tengo ese pequeñisimo problema que aveces sale y aveces no la verdad IONIC2 aveces funcionan unas cosas y otras no, que puede ser el error gracias.

    NOTA: ionic1 me encanta pero se que deve migrar a IONIC2, pero no entiendo porque cosas que me sirven en un projecto las quiero porner en uno nuevo o en otro y ya no funcionan. Luego me boy y ejecuto nuevamente el que servia y derepente ya no funciona :(((((( que es lo que sucede.

    sera que es mi PC por lo que tenia instalado ionic1-……….
    Este es el error :
    ————————————————————————————————
    Error: watch /home/fernando/dev/Angular2/Projecto/appCliente/node_modules/angular2/src/core/debug/debug_renderer.js ENOSPC

    at exports._errnoException (util.js:890:11)

    at FSWatcher.start (fs.js:1313:19)

    at Object.fs.watch (fs.js:1341:11)

    at createFsWatchInstance (/home/fernando/dev/Angular2/Projecto/appCliente/node_modules/chokidar/lib/nodefs-handler.js:37:15)

    at setFsWatchListener (/home/fernando/dev/Angular2/Projecto/appCliente/node_modules/chokidar/lib/nodefs-handler.js:80:15)

    at FSWatcher.NodeFsHandler._watchWithNodeFs (/home/fernando/dev/Angular2/Projecto/appCliente/node_modules/chokidar/lib/nodefs-handler.js:228:14)

    at FSWatcher.NodeFsHandler._handleFile (/home/fernando/dev/Angular2/Projecto/appCliente/node_modules/chokidar/lib/nodefs-handler.js:255:21)

    at FSWatcher. (/home/fernando/dev/Angular2/Projecto/appCliente/node_modules/chokidar/lib/nodefs-handler.js:473:21)

    at FSReqWrap.oncomplete (fs.js:82:15)

    Mind letting us know? https://github.com/driftyco/ionic-cli/issues

    7.6 MB bytes written (15.88 seconds)

    [11:33:34] Finished ‘watch’ after 22 s

    [11:33:34] Starting ‘serve:before’…

    [11:33:34] Finished ‘serve:before’ after 13 μs

    WARN: ionic.config.js has been deprecated, you can remove it.

    Live Reload failed to start, error: Error: watch /home/fernando/dev/Angular2/Projecto/appCliente/www/build ENOSPC

    Ionic serve failed – error: Error: watch /home/fernando/dev/Angular2/Projecto/appCliente/www/build ENOSPC

    Ionic server commands, enter:

    restart or r to restart the client app from the root

    goto or g and a url to have the app navigate to the given url

    consolelogs or c to enable/disable console log output

    serverlogs or s to enable/disable server log output

    quit or q to shutdown the server and exit

    ionic $

  • Paul Barry

    Just a small typo under the “Navigating From Home to About” section. You refer to “home.js” when it should refer to “home.ts”. Thanks.

    • http://www.mcgivery.com/ Andrew McGivery

      Thanks for the correction.

      If you update your CLI to the newest version, it already will generate typescript pages instead of javascript based on if you set the `–ts` flag when the project was created.

  • Fernando

    With passed params in the navPush!

    NOTE: Sorry for my english, I do not speak english.

  • Andrew

    I’m getting an error from this line “import {AboutPage} from ‘..about/about’;”
    It says “Error: Cannot find module ‘..about/about’ from and then shows the directory up to apppageshome. Are you sure the .. is the syntax for navigating out of that folder? I’ve double checked…I have within the pages directory a folder called about, and within that folder the three about files (html, scss, and ts).

  • Ravitheja Maddineni

    Very good sample.

    I am getting below error when I tried to run the ionic tutorial project created by using ionic start MyIonic2ProjectSideMenu tutorial –v2

    Could someone help me how to fix this issue.

    > node_modules/ionic-angular/components.core.scss Error: Import directives may not be used within control directives or mixins. on line 34 of node_modules/ionic-angular/components.core.scss @import “fonts/ionicons”; –^

  • Ben O’Connor

    This is out of date now though right? Update to Beta 10+?

  • Varshil Shah

    hey thanks for this post..
    if i want go back to specific page . how i do that?
    if u have any example of popTo()..please share with me
    i am currently working on ionic 2

  • Maii Roxane

    Hi, ionic cli still up to date or is it better to download the quickstart from the angular 2 website?

  • Couim

    it does not work for my part with the new version of Ionic (RC1). Any idea ?

  • Gabriel Lavoura

    Need Update…

    https://forum.ionicframework.com/t/impossible-navigation-between-pages/65778

    Need to add some lines in app.module.ts.

  • Kaustubh Talathi

    Any idea why I am getting below error on click of “Go to About” button:
    polyfills.js:3 Uncaught Error: Error in ./HomePage class HomePage – inline template:12:3 caused by: No component factory found for AboutPage

    Appreciate any feedback to resolve the issue.

    • jose malpica

      I have exactly the same error! ::(

      • Kaustubh Talathi

        Found the fix. AboutPage needs to be referred during the bootstrap process. It needs to be added in app.module.ts at import, declarations & entryComponents.

        • sanji vinsmoke

          Thank you. 🙂

  • http://www.badpenguin.org/ Antonio Gallo

    is it normal that every time a page is pushed into the stack the constructor for it its called again?

  • ima0123

    @andrewmcgivery:disqus
    It is good sample description.
    Would you please write this document to Wiki or something.
    It is little old and don’t work in latest version.

  • Guille Acosta

    You can find a working example (based on comments) on https://github.com/fantasticguille/ionic2-navigationApp