<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/reflect-metadata/0.1.3/Reflect.js"></script>
    <script src="https://cdn.rawgit.com/angular/zone.js/master/dist/zone.min.js"></script>
    <script src="config.js"></script>
    <script src="https://npmcdn.com/ionic-angular@2.0.0-beta.10/bundles/ionic.system.js"></script>
  
    <link href="https://npmcdn.com/ionic-angular@2.0.0-beta.10/bundles/ionic.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
  </head>

  <body>
    <!-- this Ionic's root component and where the app will load -->
    <ion-app></ion-app>
    
    <script>
      System.import('app.ts')
    </script>
  </body>

</html>
import { NavController } from 'ionic-angular/index';
import { Page1 } from 'page1.ts'
import { Component } from "@angular/core";


@Component({
  templateUrl:"home.html"
})
export class HomePage {
  
  greeting: string;
  
  constructor(private nav: NavController) {
		
	}
	
	goToPage1() {
	  this.nav.push(Page1);
	}


}
SCROLL-CONTENT {
	overflow-y: auto !important;
}

CODE {
  background: #EFEFEF;
}
/**
 * PLUNKER VERSION (based on systemjs.config.js in angular.io)
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 * Override at the last minute with global.filterSystemConfig (as plunkers do)
 */
(function(global) {

  var ngVer = '@2.0.0-rc.1'; // lock in the angular package version; do not let it float to current!

  //map tells the System loader where to look for things
  var  map = {
    'app':                        'src', // 'dist',
    'rxjs':                       'https://npmcdn.com/rxjs@5.0.0-beta.6',
    'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api' // get latest
  };

  //packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'app.ts',  defaultExtension: 'ts' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' },
  };

  var packageNames = [
      '@angular/common',
      '@angular/compiler',
      '@angular/core',
      '@angular/http',
      '@angular/router',
      '@angular/platform-browser',
      '@angular/platform-browser-dynamic',
      '@angular/router-deprecated',
      '@angular/testing',
      '@angular/upgrade',
  ];

  // add map entries for angular packages in the form '@angular/common': 'https://npmcdn.com/@angular/common@0.0.0-3'
  packageNames.forEach(function(pkgName) {
    map[pkgName] = 'https://npmcdn.com/' + pkgName + ngVer;
  });

  // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
  packageNames.forEach(function(pkgName) {
    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
  });

  var config = {
    transpiler: 'typescript',
    typescriptOptions: {
      emitDecoratorMetadata: true
    },
    map: map,
    packages: packages
  }

  // filterSystemConfig - index.html's chance to modify config before we register it.
  if (global.filterSystemConfig) { global.filterSystemConfig(config); }

  System.config(config);

})(this);


/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
import { ViewChild, Component } from "@angular/core";
import { ionicBootstrap, Platform, App, MenuController, Nav } from 'ionic-angular/index';
import { HomePage } from './home.ts';
import { Page1 } from './page1.ts';
import { MenuPage } from './menu.ts';


@Component({
  templateUrl: './app.html',
  directives: [MenuPage]
})
export class MyApp {
  //@ViewChild(Nav) nav: Nav;
  constructor(private platform: Platform, private menu: MenuController, private app: App) {
    this.app = app;
    this.platform = platform;
    this.rootPage = HomePage;
    // this.pages = [
    //         { title: 'Dashboard', component: HomePage },
    //         { title: 'Page 1', component: Page1 }
    //     ];
  }
//   openPage(page) {
// 		// close the menu when clicking a link from the menu
// 		this.menu.close();
// 		// navigate to the new page if it is not the current page
//         //debugger;
// 		this.nav.setRoot(page.component);
//         //this.nav.push(page.component);
// 		//console.log(this.nav);
// 	}
}

ionicBootstrap(MyApp);
<ion-header>
  <ion-navbar primary>
    <button menuToggle>
  		<ion-icon name="menu"></ion-icon>
  	</button>
    <ion-title>
      Ionic 2
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="has-header">
  <div padding style="text-align: center;">
    <h1>Ionic 2 Test</h1>
    <p>
      Use this template to create a demo environment
      where the issues you're facing are reproduced. This will
      help us in easily reproducing your issue and solving it faster (:
    </p>
    <button secondary (click)="goToPage1()">Thanks!</button>
  </div>
</ion-content>
You can use this template to show examples of your Ionic 2 issue.
import { Component } from '@angular/core';


@Component({
  templateUrl:"./page1.html"
})
export class Page1 {
  
  
  constructor() {
		
	}
	

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

<ion-content class="has-header">
  <div padding style="text-align: center;">
    <h1>Page 1 Test</h1>
  </div>
</ion-content>
import { Component } from "@angular/core";
import {HomePage} from './home.ts';


@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  // this tells the tabs component which Pages
  // should be each tab's root Page
  tab1Root: any = HomePage;

}
<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Tab 1" tabIcon="pulse"></ion-tab>
</ion-tabs>
<ion-menu persistent="true" [content]="content">

	<ion-toolbar primary>
		<ion-title>Pages</ion-title>
	</ion-toolbar>

	<ion-content class="menu">
		<!-- <ion-list>
		  <button ion-item *ngFor="let p of pages" (click)="openPage(p)">
		    <i class="fa {{p.icon}}"></i> {{p.title}}
		  </button>
		</ion-list> -->
		<gl-menu></gl-menu>
	</ion-content>

</ion-menu>

<ion-nav id="nav" [root]="rootPage" #content swipe-back-enabled="false"></ion-nav>
import {Input, Host, Component} from '@angular/core';
import {IONIC_DIRECTIVES, MenuController, Nav} from 'ionic-angular/index';
import {HomePage} from './home.ts';
import {Page1} from './page1.ts';

/*
	Generated class for the Menu page.

	See http://ionicframework.com/docs/v2/components/#navigation for more info on
	Ionic pages and navigation.
*/
@Component({
    selector: 'gl-menu',
	  templateUrl: './menu.html',
    providers: [Nav]
})

export class MenuPage {

    hideMenu: {'Dashboard': boolean, 'Schedule': boolean, 'Grades': boolean,'Attendance': boolean, 'Transcript': boolean, 'Discipline': boolean, 'Billing': boolean, 'Alerts': boolean}
	  pages: Array<{title: string, component: any, icon: string>;
    nav: any;

    constructor(@Host() nav: Nav, private menu: MenuController){
        this.menu = menu;
        this.nav = nav;
        this.pages = [
            { title: 'Dashboard', component: HomePage },
            { title: 'Page 1', component: Page1 }
        ];
    }

    openPage(page) {
		// close the menu when clicking a link from the menu
		this.menu.close();
		// navigate to the new page if it is not the current page
        //debugger;
		this.nav.setRoot(page.component);
        //this.nav.push(page.component);
		//console.log(this.nav);
	}

        
}
<ion-list>
    <button ion-item *ngFor="let p of pages" (click)="openPage(p)">
        <i class="fa {{p.icon}}"></i> {{p.title}}
    </button>
</ion-list>