docs(demos): update API demos so they all have ion-navs

- add spacing between imports
- alphabetize imports
- removed app.html files in favor of an inline ion-nav
- cleaned up config demo so it uses proper syntax
- use file name main.html for the first page for the demo
- name the app ApiDemoApp and first page ApiDemoPage
- replace the ion-toolbars with ion-navbars

closes #7019
closes driftyco/ionic-site#647

demos/action-sheet/app.html

@@ -1 +0,0 @@
-<ion-nav [root]="root"></ion-nav>

demos/action-sheet/index.ts

@@ -1,11 +1,12 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
-import {ionicBootstrap, ActionSheet, NavController, Platform} from 'ionic-angular';
+
+import { ActionSheet, ionicBootstrap, NavController, Platform } from 'ionic-angular';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-export class InitialPage {
+export class ApiDemoPage {
   constructor(public nav: NavController, public platform: Platform) { }
 
   present() {
@@ -58,10 +59,10 @@ export class InitialPage {
 
 
 @Component({
-  templateUrl: 'app.html'
+  template: '<ion-nav [root]="root"></ion-nav>'
 })
 class ApiDemoApp {
-  root = InitialPage;
+  root = ApiDemoPage;
 }
 
 ionicBootstrap(ApiDemoApp);

demos/alert/app.html

@@ -1 +0,0 @@
-<ion-nav [root]="root"></ion-nav>

demos/alert/index.ts

@@ -1,11 +1,12 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
-import {ionicBootstrap, Alert, NavController} from 'ionic-angular';
+
+import { Alert, ionicBootstrap, NavController } from 'ionic-angular';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-export class InitialPage {
+export class ApiDemoPage {
   testRadioOpen = false;
   testRadioResult: any;
   testCheckboxOpen = false;
@@ -211,10 +212,10 @@ export class InitialPage {
 
 
 @Component({
-  templateUrl: 'app.html'
+  template: '<ion-nav [root]="root"></ion-nav>'
 })
 class ApiDemoApp {
-  root = InitialPage;
+  root = ApiDemoPage;
 }
 
 ionicBootstrap(ApiDemoApp);

demos/button/index.ts

@@ -1,10 +1,19 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
-import {ionicBootstrap} from 'ionic-angular';
+
+import { ionicBootstrap } from 'ionic-angular';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class ApiDemoApp {}
+class ApiDemoPage {}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+class ApiDemoApp {
+  root = ApiDemoPage;
+}
 
 ionicBootstrap(ApiDemoApp);

demos/button/main.html

@@ -1,8 +1,8 @@
 <ion-header>
 
-  <ion-toolbar>
+  <ion-navbar>
     <ion-title>Button</ion-title>
-  </ion-toolbar>
+  </ion-navbar>
 
 </ion-header>
 

demos/checkbox/index.ts

@@ -1,11 +1,12 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
-import {ionicBootstrap} from 'ionic-angular';
+
+import { ionicBootstrap } from 'ionic-angular';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class ApiDemoApp {
+class ApiDemoPage {
 
   data = {
     jon: true,
@@ -23,4 +24,12 @@ class ApiDemoApp {
 
 }
 
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+class ApiDemoApp {
+  root = ApiDemoPage;
+}
+
 ionicBootstrap(ApiDemoApp);

demos/checkbox/main.html

@@ -1,8 +1,8 @@
 <ion-header>
 
-  <ion-toolbar>
+  <ion-navbar>
     <ion-title>Checkbox</ion-title>
-  </ion-toolbar>
+  </ion-navbar>
 
 </ion-header>
 

demos/config/index.ts

@@ -1,6 +1,6 @@
+import { Component } from '@angular/core';
 
-import {Component} from '@angular/core';
+import { ionicBootstrap, IonicApp, Platform, NavController } from 'ionic-angular';
-import {ionicBootstrap, IonicApp, Platform, NavController} from 'ionic-angular';
 
 
 if (!window.localStorage) {
@@ -74,14 +74,14 @@ if (window.localStorage.getItem('configDemo')) {
   templateUrl: 'tabs.html'
 })
 export class TabPage {
-  tabOne = InitialPage;
+  tabOne = ApiDemoPage;
 }
 
 
 @Component({
   templateUrl: 'main.html'
 })
-export class InitialPage {
+export class ApiDemoPage {
   config: any;
   initialConfig: any;
 
@@ -113,14 +113,14 @@ export class InitialPage {
   }
 
   push() {
-    this.nav.push(AnotherPage);
+    this.nav.push(PushPage);
   }
 }
 
 @Component({
   templateUrl: 'page.html'
 })
-export class AnotherPage {
+export class PushPage {
   constructor(public nav: NavController) {}
 
   pop() {

demos/config/main.html

@@ -46,14 +46,15 @@
     </button>
   </div>
 
+  <p class="note">Any config for your app should be passed as the third argument to ionicBootstrap.</p>
+
   <!-- this has to be formatted weird for pre -->
-  <pre margin>@App({
+  <pre margin>
-  config: {
+ionicBootstrap(MyApp, [], {
   backButtonIcon: "{{initialConfig.backButtonIcon}}"
   iconMode: "{{initialConfig.iconMode}}"
   tabbarPlacement: "{{initialConfig.tabbarPlacement}}"
-  }
+});</pre>
-})</pre>
 
   <div padding>
     <button block secondary (click)="push()">

demos/config/page.html

@@ -1,6 +1,8 @@
-<ion-navbar *navbar>
+<ion-header>
+  <ion-navbar>
     <ion-title>Page</ion-title>
-</ion-navbar>
+  </ion-navbar>
+</ion-header>
 
 <ion-content>
   <div padding>

demos/datetime/index.ts

@@ -1,11 +1,12 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
-import {ionicBootstrap} from 'ionic-angular';
+
+import { ionicBootstrap } from 'ionic-angular';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class MainPage {
+class ApiDemoPage {
   wwwReleased = '1991';
   netscapeReleased = '1994-12-15T13:47:20.789';
   operaReleased = '1995-04-15';
@@ -68,7 +69,7 @@ class MainPage {
   template: '<ion-nav [root]="root"></ion-nav>'
 })
 class ApiDemoApp {
-  root = MainPage;
+  root = ApiDemoPage;
 }
 
 ionicBootstrap(ApiDemoApp);

demos/events/app.html

@@ -0,0 +1,41 @@
+<ion-menu #menu [content]="content">
+
+  <ion-toolbar secondary>
+    <ion-title>Left Menu</ion-title>
+  </ion-toolbar>
+
+  <ion-content>
+
+    <ion-list *ngIf="loggedIn">
+      <ion-list-header>
+        Logged in as <b>Administrator</b>
+      </ion-list-header>
+      <button ion-item menuClose *ngFor="let p of loggedInPages" (click)="openPage(menu, p)">
+        <ion-label primary>{{p.title}}</ion-label>
+      </button>
+
+      <button ion-item menuToggle>
+        Close Menu
+      </button>
+
+    </ion-list>
+
+    <ion-list *ngIf="!loggedIn">
+      <ion-list-header>
+        Please Log In
+      </ion-list-header>
+      <button ion-item menuClose *ngFor="let p of loggedOutPages" (click)="openPage(menu, p)">
+        <ion-label primary>{{p.title}}</ion-label>
+      </button>
+
+      <button ion-item menuToggle>
+        Close Menu
+      </button>
+
+    </ion-list>
+  </ion-content>
+
+</ion-menu>
+
+
+<ion-nav id="nav" [root]="root" #content swipeBackEnabled="false"></ion-nav>

demos/events/index.ts

@@ -1,8 +1,11 @@
-import {Component, ViewChild} from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
-import {ionicBootstrap, Events, Nav} from 'ionic-angular';
+
+import { Events, ionicBootstrap, Nav } from 'ionic-angular';
 
 
-@Component({templateUrl: 'login.html'})
+@Component({
+  templateUrl: 'login.html'
+})
 class Login {
   user = {
     name: "Administrator",
@@ -17,7 +20,10 @@ class Login {
 
 }
 
-@Component({templateUrl: 'logout.html'})
+
+@Component({
+  templateUrl: 'logout.html'
+})
 class Logout {
   constructor(private events: Events) {}
 
@@ -26,18 +32,22 @@ class Logout {
   }
 }
 
+
 @Component({
-  templateUrl: 'main.html'
+  templateUrl: 'app.html'
 })
 class ApiDemoApp {
   @ViewChild(Nav) nav: Nav;
 
-  rootView = Login;
+  root = Login;
   loggedIn = false;
 
-  pages = [
+  loggedInPages = [
-    { title: 'Logout', component: Logout, showLoggedIn: true },
+    { title: 'Logout', component: Logout }
-    { title: 'Login', component: Login, showLoggedIn: false },
+  ];
+
+  loggedOutPages = [
+    { title: 'Login', component: Login }
   ];
 
   constructor(private events: Events) {

demos/events/login.html

@@ -4,6 +4,7 @@
     <button menuToggle>
       <ion-icon name="menu"></ion-icon>
     </button>
+
     <ion-title>
       Events
     </ion-title>
@@ -12,7 +13,7 @@
 </ion-header>
 
 
-<ion-content #content>
+<ion-content>
 
   <h3 margin-left>Login</h3>
   <p margin>Click the login button to use the credentials below. Then, toggle the menu to see the menu items change.</p>

demos/events/logout.html

@@ -1,5 +1,6 @@
+<ion-header>
 
-<ion-navbar *navbar>
+  <ion-navbar>
     <button menuToggle>
       <ion-icon name="menu"></ion-icon>
     </button>
@@ -7,9 +8,11 @@
     <ion-title>
       Events
     </ion-title>
-</ion-navbar>
+  </ion-navbar>
   
-<ion-content #content>
+</ion-header>
+
+<ion-content>
   <h3 margin-left>Logout</h3>
   <p margin>Click the logout button to logout. Then, toggle the menu to see the menu items change.</p>
 

demos/events/main.html

@@ -1,27 +0,0 @@
-<ion-menu #menu [content]="content">
-
-  <ion-toolbar secondary>
-    <ion-title>Left Menu</ion-title>
-  </ion-toolbar>
-
-  <ion-content>
-
-    <ion-list>
-      <ion-item *ngIf="loggedIn">
-        Welcome, Administrator!
-      </ion-item>
-      <button ion-item menuClose *ngFor="let p of pages" (click)="openPage(menu, p)" [hidden]="(loggedIn == true && p.showLoggedIn == false) || (loggedIn == false && p.showLoggedIn == true)">
-        <ion-label primary>{{p.title}}</ion-label>
-      </button>
-
-      <button ion-item menuToggle>
-        Close Menu
-      </button>
-
-    </ion-list>
-  </ion-content>
-
-</ion-menu>
-
-
-<ion-nav id="nav" [root]="rootView" #content swipeBackEnabled="false"></ion-nav>

demos/hide-when/index.ts

@@ -1,10 +1,19 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
-import {ionicBootstrap} from 'ionic-angular';
+
+import { ionicBootstrap } from 'ionic-angular';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class ApiDemoApp {}
+class ApiDemoPage {}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+class ApiDemoApp {
+  root = ApiDemoPage;
+}
 
 ionicBootstrap(ApiDemoApp);

demos/hide-when/main.html

@@ -1,8 +1,8 @@
 <ion-header>
 
-  <ion-toolbar>
+  <ion-navbar>
     <ion-title>HideWhen</ion-title>
-  </ion-toolbar>
+  </ion-navbar>
 
 </ion-header>
 

demos/icon/index.ts

@@ -1,10 +1,19 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
-import {ionicBootstrap} from 'ionic-angular';
+
+import { ionicBootstrap } from 'ionic-angular';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class ApiDemoApp {}
+class ApiDemoPage {}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+class ApiDemoApp {
+  root = ApiDemoPage;
+}
 
 ionicBootstrap(ApiDemoApp);

demos/icon/main.html

@@ -1,8 +1,8 @@
 <ion-header>
 
-  <ion-toolbar>
+  <ion-navbar>
     <ion-title>Icon</ion-title>
-  </ion-toolbar>
+  </ion-navbar>
 
 </ion-header>
 

demos/infinite-scroll/main.html

@@ -1,8 +1,8 @@
 <ion-header>
 
-  <ion-toolbar>
+  <ion-navbar>
     <ion-title>Infinite Scroll</ion-title>
-  </ion-toolbar>
+  </ion-navbar>
 
 </ion-header>
 

demos/input/index.ts

@@ -1,10 +1,19 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
-import {ionicBootstrap} from 'ionic-angular';
+
+import { ionicBootstrap } from 'ionic-angular';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class ApiDemoApp {}
+class ApiDemoPage {}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+class ApiDemoApp {
+  root = ApiDemoPage;
+}
 
 ionicBootstrap(ApiDemoApp);

demos/input/main.html

@@ -1,8 +1,8 @@
 <ion-header>
 
-  <ion-toolbar>
+  <ion-navbar>
     <ion-title>Input</ion-title>
-  </ion-toolbar>
+  </ion-navbar>
 
 </ion-header>
 

demos/item-sliding/index.ts

@@ -1,11 +1,12 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
-import {ionicBootstrap, ItemSliding, Toast, NavController} from 'ionic-angular';
+
+import { ionicBootstrap, ItemSliding, NavController, Toast } from 'ionic-angular';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class InitialPage {
+class ApiDemoPage {
   chats: any[];
   logins: any[];
 
@@ -89,7 +90,7 @@ class InitialPage {
   template: '<ion-nav [root]="root"></ion-nav>'
 })
 class ApiDemoApp {
-  root = InitialPage;
+  root = ApiDemoPage;
 }
 
 ionicBootstrap(ApiDemoApp);

demos/item-sliding/main.html

@@ -1,8 +1,8 @@
 <ion-header>
 
-  <ion-toolbar>
+  <ion-navbar>
     <ion-title>Item Sliding</ion-title>
-  </ion-toolbar>
+  </ion-navbar>
 
 </ion-header>
 

demos/item/index.ts

@@ -2,12 +2,12 @@ import { Component } from '@angular/core';
 
 import { ionicBootstrap } from 'ionic-angular';
 
+
 @Component({
   templateUrl: 'main.html'
 })
-class ApiDemoPage {
+class ApiDemoPage {}
 
-}
 
 @Component({
   template: '<ion-nav [root]="root"></ion-nav>'

demos/item/main.html

@@ -1,8 +1,8 @@
 <ion-header>
 
-  <ion-toolbar>
+  <ion-navbar>
     <ion-title>Item</ion-title>
-  </ion-toolbar>
+  </ion-navbar>
 
 </ion-header>
 

demos/label/index.ts

@@ -1,10 +1,19 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
-import {ionicBootstrap} from 'ionic-angular';
+
+import { ionicBootstrap } from 'ionic-angular';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class ApiDemoApp {}
+class ApiDemoPage {}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+class ApiDemoApp {
+  root = ApiDemoPage;
+}
 
 ionicBootstrap(ApiDemoApp);

demos/label/main.html

@@ -1,8 +1,8 @@
 <ion-header>
 
-  <ion-toolbar>
+  <ion-navbar>
     <ion-title>Label</ion-title>
-  </ion-toolbar>
+  </ion-navbar>
 
 </ion-header>
 

demos/list/index.ts

@@ -5,9 +5,8 @@ import { ionicBootstrap } from 'ionic-angular';
 @Component({
   templateUrl: 'main.html'
 })
-class ApiDemoPage {
+class ApiDemoPage {}
 
-}
 
 @Component({
   template: '<ion-nav [root]="root"></ion-nav>'

demos/list/main.html

@@ -1,8 +1,8 @@
 <ion-header>
 
-  <ion-toolbar>
+  <ion-navbar>
     <ion-title>List</ion-title>
-  </ion-toolbar>
+  </ion-navbar>
 
 </ion-header>
 

demos/loading/index.ts

@@ -1,5 +1,6 @@
-import {Component, ViewEncapsulation} from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
-import {ionicBootstrap, Loading, NavController, Platform} from 'ionic-angular';
+
+import { ionicBootstrap, Loading, NavController, Platform } from 'ionic-angular';
 
 
 @Component({

demos/loading/main.html

@@ -1,8 +1,8 @@
 <ion-header>
 
-  <ion-toolbar>
+  <ion-navbar>
     <ion-title>Loading</ion-title>
-  </ion-toolbar>
+  </ion-navbar>
 
 </ion-header>
 

demos/local-storage/index.ts

@@ -1,10 +1,11 @@
-import {Component} from '@angular/core';
+import { Component, Injectable, Pipe, PipeTransform } from '@angular/core';
-import {ionicBootstrap, IonicApp, Config, Platform} from 'ionic-angular';
+
-import {Storage, LocalStorage} from 'ionic-angular';
+import { Config, IonicApp, ionicBootstrap, LocalStorage, Platform, Storage } from 'ionic-angular';
-import {Pipe, PipeTransform, Injectable} from '@angular/core'
 
 
-@Pipe({name: 'cleanLocalData'})
+@Pipe({
+  name: 'cleanLocalData'
+})
 @Injectable()
 class CleanLocalDataPipe implements PipeTransform {
   validKeys: string[];
@@ -29,7 +30,7 @@ class CleanLocalDataPipe implements PipeTransform {
   templateUrl: 'main.html',
   pipes: [CleanLocalDataPipe]
 })
-class MainPage {
+class ApiDemoPage {
   local: Storage;
   localStorageDemo: string;
   myItem: any;
@@ -84,7 +85,7 @@ class MainPage {
   pipes: [CleanLocalDataPipe]
 })
 class ApiDemoApp {
-  root = MainPage;
+  root = ApiDemoPage;
 }
 
 ionicBootstrap(ApiDemoApp);

demos/local-storage/main.html

@@ -1,8 +1,8 @@
 <ion-header>
 
-  <ion-toolbar>
+  <ion-navbar>
     <ion-title>Local Storage</ion-title>
-  </ion-toolbar>
+  </ion-navbar>
 
 </ion-header>
 

demos/menu/app.html

@@ -0,0 +1,34 @@
+<ion-menu [content]="content" id="menu1">
+
+  <ion-toolbar secondary>
+    <ion-title>Menu 1</ion-title>
+  </ion-toolbar>
+
+  <ion-content>
+    <ion-list>
+      <button ion-item menuClose="menu1" detail-none>
+        Close Menu 1
+      </button>
+    </ion-list>
+  </ion-content>
+
+</ion-menu>
+
+
+<ion-menu [content]="content" id="menu2">
+
+  <ion-toolbar danger>
+    <ion-title>Menu 2</ion-title>
+  </ion-toolbar>
+
+  <ion-content>
+    <ion-list>
+      <button ion-item menuClose="menu2" detail-none>
+        Close Menu 2
+      </button>
+    </ion-list>
+  </ion-content>
+
+</ion-menu>
+
+<ion-nav [root]="root" #content swipeBackEnabled="false"></ion-nav>

demos/menu/index.ts

@@ -1,9 +1,12 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
-import {ionicBootstrap, MenuController} from 'ionic-angular';
+
+import { ionicBootstrap, MenuController } from 'ionic-angular';
 
 
-@Component({templateUrl: 'page1.html'})
+@Component({
-class Page1 {
+  templateUrl: 'main.html'
+})
+class ApiDemoPage {
   activeMenu: string;
 
   constructor(public menu: MenuController) {
@@ -21,11 +24,12 @@ class Page1 {
   }
 }
 
+
 @Component({
-  templateUrl: 'main.html'
+  templateUrl: 'app.html'
 })
 class ApiDemoApp {
-  root = Page1;
+  root = ApiDemoPage;
 }
 
 ionicBootstrap(ApiDemoApp);

demos/menu/main.html

@@ -1,34 +1,27 @@
-<ion-menu [content]="content" id="menu1">
+<ion-header>
 
-  <ion-toolbar secondary>
+  <ion-navbar>
-    <ion-title>Menu 1</ion-title>
+    <button [menuToggle]="activeMenu">
-  </ion-toolbar>
+      <ion-icon name="menu"></ion-icon>
-
-  <ion-content>
-    <ion-list>
-      <button ion-item menuClose="menu1" detail-none>
-        Close Menu 1
     </button>
-    </ion-list>
+    <ion-title>
-  </ion-content>
+      Menu
+    </ion-title>
+  </ion-navbar>
 
-</ion-menu>
+</ion-header>
 
 
-<ion-menu [content]="content" id="menu2">
+<ion-content padding>
 
-  <ion-toolbar danger>
+  <h4>Active Menu: <b primary>{{ (activeMenu == 'menu1') ? 'Menu 1' : 'Menu 2' }}</b></h4>
-    <ion-title>Menu 2</ion-title>
-  </ion-toolbar>
 
-  <ion-content>
+  <p>This page has two menus with different id's, but only one is active at a time.</p>
-    <ion-list>
-      <button ion-item menuClose="menu2" detail-none>
-        Close Menu 2
-      </button>
-    </ion-list>
-  </ion-content>
 
-</ion-menu>
+  <button block secondary (click)="menu1Active()">Make Menu 1 Active</button>
 
-<ion-nav [root]="root" #content swipeBackEnabled="false"></ion-nav>
+  <button block danger (click)="menu2Active()">Make Menu 2 Active</button>
+
+  <button block [menuToggle]="activeMenu">Toggle Menu</button>
+
+</ion-content>

demos/menu/page1.html

@@ -1,27 +0,0 @@
-<ion-header>
-
-  <ion-navbar>
-    <button [menuToggle]="activeMenu">
-      <ion-icon name="menu"></ion-icon>
-    </button>
-    <ion-title>
-      Menu
-    </ion-title>
-  </ion-navbar>
-
-</ion-header>
-
-
-<ion-content padding>
-
-  <h4>Active Menu: <b primary>{{ (activeMenu == 'menu1') ? 'Menu 1' : 'Menu 2' }}</b></h4>
-
-  <p>This page has two menus with different id's, but only one is active at a time.</p>
-
-  <button block secondary (click)="menu1Active()">Make Menu 1 Active</button>
-
-  <button block danger (click)="menu2Active()">Make Menu 2 Active</button>
-
-  <button block [menuToggle]="activeMenu">Toggle Menu</button>
-
-</ion-content>

demos/modal/app.html

@@ -1 +0,0 @@
-<ion-nav [root]="root"></ion-nav>

demos/modal/index.ts

@@ -1,6 +1,6 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
-import {ionicBootstrap, IonicApp, Config, Platform, ViewController} from 'ionic-angular';
+
-import {Modal, NavController, NavParams, Animation} from 'ionic-angular';
+import { Animation, Config, IonicApp, ionicBootstrap, Modal, NavController, NavParams, Platform, ViewController } from 'ionic-angular';
 
 
 @Component({
@@ -27,6 +27,7 @@ export class ModalFirstPage {
   }
 }
 
+
 @Component({
   templateUrl: "modal-content.html"
 })
@@ -48,7 +49,7 @@ export class ModalContentPage {
 
 
 @Component({
-  templateUrl: 'app.html'
+  template: '<ion-nav [root]="root"></ion-nav>'
 })
 class ApiDemoApp {
   root = ModalFirstPage;

demos/nav-params/app.html

@@ -1 +0,0 @@
-<ion-nav [root]="root"></ion-nav>

demos/nav-params/index.ts

@@ -1,25 +1,26 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
-import {ionicBootstrap, NavController, NavParams} from 'ionic-angular';
+
+import { ionicBootstrap, NavController, NavParams } from 'ionic-angular';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-export class InitialPage {
+export class ApiDemoPage {
-  myParam = '';
+  myParam: string = '';
 
   constructor(public nav: NavController) {}
 
   pushParams() {
-    this.nav.push(Page2, { 'myParam': this.myParam });
+    this.nav.push(PushPage, { 'myParam': this.myParam });
   }
 }
 
 
 @Component({
-  templateUrl: "page-2.html"
+  templateUrl: "page.html"
 })
-export class Page2 {
+export class PushPage {
   myParam: string;
 
   constructor(public nav: NavController, params: NavParams) {
@@ -29,10 +30,10 @@ export class Page2 {
 
 
 @Component({
-  templateUrl: 'app.html'
+  template: '<ion-nav [root]="root"></ion-nav>'
 })
 class ApiDemoApp {
-  root = InitialPage;
+  root = ApiDemoPage;
 }
 
 ionicBootstrap(ApiDemoApp);

demos/navbar/index.ts

@@ -1,15 +1,24 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
-import {ionicBootstrap} from 'ionic-angular';
+
+import { ionicBootstrap } from 'ionic-angular';
 
 
 // Use the toolbar demo but pass in the demo name to change the title
 @Component({
   templateUrl: '../toolbar/main.html'
 })
-class ApiDemoApp {
+class ApiDemoPage {
   demo = "Navbar";
   favorites = "recent";
   apps = "free";
 }
 
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+class ApiDemoApp {
+  root = ApiDemoPage;
+}
+
 ionicBootstrap(ApiDemoApp);

demos/navigation/app.html

@@ -1 +0,0 @@
-<ion-nav [root]="root"></ion-nav>

demos/navigation/index.ts

@@ -1,5 +1,6 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
-import {ionicBootstrap, Config, Platform, NavController, NavParams} from 'ionic-angular';
+
+import { Config, ionicBootstrap, NavController, NavParams, Platform } from 'ionic-angular';
 
 var PAGE_NUM = 2;
 
@@ -7,25 +8,25 @@ var PAGE_NUM = 2;
 @Component({
   templateUrl: 'main.html'
 })
-export class InitialPage {
+export class ApiDemoPage {
   constructor(public nav: NavController) {}
 
   push() {
-    this.nav.push(Page2);
+    this.nav.push(PushPage);
   }
 }
 
 @Component({
-  templateUrl: "page-2.html"
+  templateUrl: "page.html"
 })
-export class Page2 {
+export class PushPage {
   pageNum = PAGE_NUM;
 
   constructor(private nav: NavController) {}
 
   push() {
     PAGE_NUM++;
-    this.nav.push(Page2);
+    this.nav.push(PushPage);
   }
 
   pop() {
@@ -38,10 +39,10 @@ export class Page2 {
 
 
 @Component({
-  templateUrl: 'app.html'
+  template: '<ion-nav [root]="root"></ion-nav>'
 })
 class ApiDemoApp {
-  root = InitialPage;
+  root = ApiDemoPage;
 }
 
 ionicBootstrap(ApiDemoApp);

demos/platform/index.ts

@@ -1,11 +1,12 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
-import {ionicBootstrap, Platform} from 'ionic-angular';
+
+import { ionicBootstrap, Platform } from 'ionic-angular';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class ApiDemoApp {
+class ApiDemoPage {
   isIos: boolean;
   isAndroid: boolean;
   isWindows: boolean;
@@ -17,4 +18,12 @@ class ApiDemoApp {
   }
 }
 
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+class ApiDemoApp {
+  root = ApiDemoPage;
+}
+
 ionicBootstrap(ApiDemoApp);

demos/platform/main.html

@@ -1,8 +1,8 @@
 <ion-header>
 
-  <ion-toolbar>
+  <ion-navbar>
     <ion-title>Platform</ion-title>
-  </ion-toolbar>
+  </ion-navbar>
 
 </ion-header>
 

demos/popover/index.ts

@@ -1,5 +1,6 @@
-import {Component, ViewChild, ElementRef, ViewEncapsulation} from '@angular/core';
+import { Component, ElementRef, ViewChild, ViewEncapsulation } from '@angular/core';
-import {ionicBootstrap, Popover, NavController, Content, NavParams} from 'ionic-angular';
+
+import { Content, ionicBootstrap, NavController, NavParams, Popover } from 'ionic-angular';
 
 
 @Component({
@@ -136,7 +137,7 @@ class PopoverRadioPage {
 @Component({
   templateUrl: 'main.html'
 })
-class PopoverPage {
+class ApiDemoPage {
   @ViewChild('popoverContent', {read: ElementRef}) content: ElementRef;
   @ViewChild('popoverText', {read: ElementRef}) text: ElementRef;
 
@@ -164,7 +165,7 @@ class PopoverPage {
   encapsulation: ViewEncapsulation.None
 })
 class ApiDemoApp {
-  root = PopoverPage;
+  root = ApiDemoPage;
 }
 
 ionicBootstrap(ApiDemoApp);

demos/radio/index.ts

@@ -1,12 +1,21 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
-import {ionicBootstrap} from 'ionic-angular';
+
+import { ionicBootstrap } from 'ionic-angular';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class ApiDemoApp {
+class ApiDemoPage {
   isDisabled = true;
 }
 
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+class ApiDemoApp {
+  root = ApiDemoPage;
+}
+
 ionicBootstrap(ApiDemoApp);

demos/radio/main.html

@@ -1,8 +1,8 @@
 <ion-header>
 
-  <ion-toolbar>
+  <ion-navbar>
     <ion-title>Radio</ion-title>
-  </ion-toolbar>
+  </ion-navbar>
 
 </ion-header>
 

demos/range/index.ts

@@ -1,10 +1,11 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
-import {ionicBootstrap} from 'ionic-angular';
+
+import { ionicBootstrap } from 'ionic-angular';
 
 @Component({
   templateUrl: 'main.html'
 })
-class ApiDemoApp {
+class ApiDemoPage {
   brightness: number = 20;
   saturation: number = 0;
   warmth: number = 1300;
@@ -15,4 +16,12 @@ class ApiDemoApp {
   }
 }
 
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+class ApiDemoApp {
+  root = ApiDemoPage;
+}
+
 ionicBootstrap(ApiDemoApp);

demos/range/main.html

@@ -1,8 +1,8 @@
 <ion-header>
 
-  <ion-toolbar>
+  <ion-navbar>
     <ion-title>Range</ion-title>
-  </ion-toolbar>
+  </ion-navbar>
 
 </ion-header>
 

demos/refresher/index.ts

@@ -1,5 +1,6 @@
-import {Component, Injectable} from '@angular/core';
+import { Component, Injectable } from '@angular/core';
-import {ionicBootstrap, Refresher} from 'ionic-angular';
+
+import { ionicBootstrap, Refresher } from 'ionic-angular';
 
 
 /**
@@ -67,7 +68,7 @@ export class MockProvider {
   templateUrl: 'main.html',
   providers: [MockProvider]
 })
-class ApiDemoApp {
+class ApiDemoPage {
   items: string[];
 
   constructor(private mockProvider: MockProvider) {
@@ -91,4 +92,12 @@ class ApiDemoApp {
   }
 }
 
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+class ApiDemoApp {
+  root = ApiDemoPage;
+}
+
 ionicBootstrap(ApiDemoApp);

demos/refresher/main.html

@@ -1,8 +1,8 @@
 <ion-header>
 
-  <ion-toolbar>
+  <ion-navbar>
     <ion-title>Refresher</ion-title>
-  </ion-toolbar>
+  </ion-navbar>
 
 </ion-header>
 

demos/scroll/index.ts

@@ -1,10 +1,19 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
-import {ionicBootstrap} from 'ionic-angular';
+
+import { ionicBootstrap } from 'ionic-angular';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class ApiDemoApp {}
+class ApiDemoPage {}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+class ApiDemoApp {
+  root = ApiDemoPage;
+}
 
 ionicBootstrap(ApiDemoApp);

demos/scroll/main.html

@@ -1,8 +1,8 @@
 <ion-header>
 
-  <ion-toolbar>
+  <ion-navbar>
     <ion-title>Scroll</ion-title>
-  </ion-toolbar>
+  </ion-navbar>
 
 </ion-header>
 

demos/searchbar/index.ts

@@ -1,10 +1,40 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
-import {ionicBootstrap} from 'ionic-angular';
+
+import { ionicBootstrap } from 'ionic-angular';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class ApiDemoApp {}
+class ApiDemoPage {
+  items: Array<string>;
+
+  ngOnInit() {
+    this.setItems();
+  }
+
+  setItems() {
+    this.items = ['Orange', 'Banana', 'Pear', 'Tomato', 'Grape', 'Apple', 'Cherries', 'Cranberries', 'Raspberries', 'Strawberries', 'Watermelon'];
+  }
+
+  filterItems(ev) {
+    this.setItems();
+    let val = ev.target.value;
+
+    if (val && val.trim() !== '') {
+      this.items = this.items.filter(function(item) {
+        return item.toLowerCase().includes(val.toLowerCase());
+      });
+    }
+  }
+}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+class ApiDemoApp {
+  root = ApiDemoPage;
+}
 
 ionicBootstrap(ApiDemoApp);

demos/searchbar/main.html

@@ -1,38 +1,26 @@
 <ion-header>
 
-  <ion-toolbar>
+  <ion-navbar no-border-bottom>
     <ion-title>Searchbar</ion-title>
-  </ion-toolbar>
+  </ion-navbar>
 
-  <ion-toolbar>
+  <ion-toolbar no-border-top>
-    <ion-searchbar placeholder="Default Toolbar"></ion-searchbar>
+    <ion-searchbar placeholder="Filter Items" (ionInput)="filterItems($event)"></ion-searchbar>
-  </ion-toolbar>
-
-  <ion-toolbar primary>
-    <ion-searchbar placeholder="Primary Toolbar"></ion-searchbar>
-  </ion-toolbar>
-
-  <ion-toolbar secondary>
-    <ion-searchbar placeholder="Secondary Toolbar"></ion-searchbar>
   </ion-toolbar>
 
 </ion-header>
 
+<ion-content>
 
-<ion-content class="searchbar-demo">
+  <ion-searchbar placeholder="Filter Items with Cancel" showCancelButton danger (ionInput)="filterItems($event)"></ion-searchbar>
 
   <p padding-left padding-right>Searchbars can be placed in a toolbar or anywhere in the content.</p>
 
-  <ion-searchbar placeholder="Default Searchbar"></ion-searchbar>
+  <ion-list>
-  <hr>
+    <ion-item *ngFor="let item of items">
-
+      {{ item }}
-  <ion-searchbar placeholder="Primary Searchbar" primary></ion-searchbar>
+    </ion-item>
-  <hr>
+  </ion-list>
-
-  <ion-searchbar placeholder="Secondary Searchbar" secondary></ion-searchbar>
-  <hr>
-
-  <ion-searchbar placeholder="Danger Searchbar" danger></ion-searchbar>
 
 </ion-content>
 
@@ -40,14 +28,7 @@
 <ion-footer>
 
   <ion-toolbar danger>
-    <ion-searchbar placeholder="Danger Toolbar"></ion-searchbar>
+    <ion-searchbar placeholder="Search" (ionInput)="filterItems($event)"></ion-searchbar>
   </ion-toolbar>
 
 </ion-footer>
-
-
-<style>
-  .searchbar-demo hr {
-    background-color: transparent;
-  }
-</style>

demos/segment/index.ts

@@ -1,11 +1,12 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
-import {ionicBootstrap} from 'ionic-angular';
+
+import { ionicBootstrap } from 'ionic-angular';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class ApiDemoApp {
+class ApiDemoPage {
   appType = "paid";
   safari = "links";
   news = "local";
@@ -20,4 +21,12 @@ class ApiDemoApp {
   proxy = "auto";
 }
 
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+class ApiDemoApp {
+  root = ApiDemoPage;
+}
+
 ionicBootstrap(ApiDemoApp);

demos/segment/main.html

@@ -1,10 +1,10 @@
 <ion-header>
 
-  <ion-toolbar>
+  <ion-navbar>
     <ion-title>Segment</ion-title>
-  </ion-toolbar>
+  </ion-navbar>
 
-  <ion-toolbar>
+  <ion-toolbar no-border-top>
     <ion-segment [(ngModel)]="appType">
       <ion-segment-button value="paid">
         Paid
@@ -18,7 +18,7 @@
     </ion-segment>
   </ion-toolbar>
 
-  <ion-toolbar>
+  <ion-toolbar no-border-top>
     <ion-segment [(ngModel)]="news" secondary>
       <ion-segment-button value="worldwide">
         Worldwide
@@ -32,7 +32,7 @@
     </ion-segment>
   </ion-toolbar>
 
-  <ion-toolbar>
+  <ion-toolbar no-border-top>
     <ion-segment [(ngModel)]="safari" dark class="icon-segment-demo">
       <ion-segment-button value="bookmarks">
         <ion-icon name="book"></ion-icon>
@@ -46,7 +46,7 @@
     </ion-segment>
   </ion-toolbar>
 
-  <ion-toolbar>
+  <ion-toolbar no-border-top>
     <ion-segment [(ngModel)]="favorites" danger>
       <ion-segment-button value="featured">
         Featured
@@ -102,7 +102,7 @@
 
 <ion-footer>
 
-  <ion-toolbar primary>
+  <ion-toolbar no-border-bottom primary>
     <ion-segment [(ngModel)]="pet" light>
       <ion-segment-button value="puppies">
         Puppies
@@ -116,7 +116,7 @@
     </ion-segment>
   </ion-toolbar>
 
-  <ion-toolbar dark>
+  <ion-toolbar no-border-bottom dark>
     <ion-segment [(ngModel)]="calendar" primary>
       <ion-segment-button value="list">
         List
@@ -130,7 +130,7 @@
     </ion-segment>
   </ion-toolbar>
 
-  <ion-toolbar danger>
+  <ion-toolbar no-border-bottom danger>
     <ion-segment [(ngModel)]="proxy" light>
       <ion-segment-button value="off">
         Off

demos/select/index.ts

@@ -1,11 +1,12 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
-import {ionicBootstrap} from 'ionic-angular';
+
+import { ionicBootstrap } from 'ionic-angular';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class MainPage {
+class ApiDemoPage {
   gender: string;
   gaming: string;
   toppings: Array<string>;
@@ -50,7 +51,7 @@ class MainPage {
   template: '<ion-nav [root]="root"></ion-nav>'
 })
 class ApiDemoApp {
-  root = MainPage;
+  root = ApiDemoPage;
 }
 
 ionicBootstrap(ApiDemoApp);

demos/select/main.html

@@ -1,8 +1,8 @@
 <ion-header>
 
-  <ion-toolbar>
+  <ion-navbar>
     <ion-title>Select</ion-title>
-  </ion-toolbar>
+  </ion-navbar>
 
 </ion-header>
 

demos/show-when/index.ts

@@ -1,10 +1,19 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
-import {ionicBootstrap} from 'ionic-angular';
+
+import { ionicBootstrap } from 'ionic-angular';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class ApiDemoApp {}
+class ApiDemoPage {}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+class ApiDemoApp {
+  root = ApiDemoPage;
+}
 
 ionicBootstrap(ApiDemoApp);

demos/show-when/main.html

@@ -1,8 +1,8 @@
 <ion-header>
 
-  <ion-toolbar>
+  <ion-navbar>
     <ion-title>ShowWhen</ion-title>
-  </ion-toolbar>
+  </ion-navbar>
 
 </ion-header>
 

demos/slides/index.ts

@@ -1,10 +1,19 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
-import {ionicBootstrap} from 'ionic-angular';
+
+import { ionicBootstrap } from 'ionic-angular';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class ApiDemoApp {}
+class ApiDemoPage {}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+class ApiDemoApp {
+  root = ApiDemoPage;
+}
 
 ionicBootstrap(ApiDemoApp);

demos/tabs/index.ts

@@ -1,5 +1,12 @@
-import {Component, ViewEncapsulation} from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
-import {ionicBootstrap} from 'ionic-angular';
+
+import { ionicBootstrap } from 'ionic-angular';
+
+
+@Component({
+  template: 'tab',
+})
+class TabPage {}
 
 
 @Component({
@@ -7,6 +14,16 @@ import {ionicBootstrap} from 'ionic-angular';
   styleUrls: ['style.css'],
   encapsulation: ViewEncapsulation.None
 })
-class ApiDemoApp {}
+class ApiDemoPage {
+  root = TabPage;
+}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+class ApiDemoApp {
+  root = ApiDemoPage;
+}
 
 ionicBootstrap(ApiDemoApp);

demos/tabs/main.html

@@ -1,15 +1,15 @@
 <ion-header>
 
-  <ion-toolbar>
+  <ion-navbar>
     <ion-title>Tabs</ion-title>
-  </ion-toolbar>
+  </ion-navbar>
 
 </ion-header>
 
 
 <ion-content>
   <!-- Text -->
-  <ion-tabs no-navbar>
+  <ion-tabs>
     <ion-tab tabTitle="Recents" [root]="root"></ion-tab>
     <ion-tab tabTitle="Favorites" [root]="root" tabBadge="23"></ion-tab>
     <ion-tab tabTitle="Settings" [root]="root"></ion-tab>
@@ -17,7 +17,7 @@
 
 
   <!-- Icons -->
-  <ion-tabs no-navbar selectedIndex="1" primary>
+  <ion-tabs selectedIndex="1" primary>
     <ion-tab tabIcon="call" [root]="root"></ion-tab>
     <ion-tab tabIcon="heart" [root]="root"></ion-tab>
     <ion-tab tabIcon="settings" [root]="root" tabBadge="2" tabBadgeStyle="danger"></ion-tab>
@@ -25,7 +25,7 @@
 
 
   <!-- Icons on top of text -->
-  <ion-tabs no-navbar selectedIndex="2" secondary>
+  <ion-tabs selectedIndex="2" secondary>
     <ion-tab tabTitle="Location" tabIcon="navigate" [root]="root"></ion-tab>
     <ion-tab tabTitle="Favorites" tabIcon="star" [root]="root" tabBadge="12" tabBadgeStyle="dark"></ion-tab>
     <ion-tab tabTitle="Radio" tabIcon="musical-notes" [root]="root"></ion-tab>
@@ -33,7 +33,7 @@
 
 
   <!-- Icons below text -->
-  <ion-tabs tabbarLayout="icon-bottom" no-navbar selectedIndex="1" danger>
+  <ion-tabs tabbarLayout="icon-bottom" selectedIndex="1" danger>
     <ion-tab tabTitle="Recents" tabIcon="call" [root]="root" tabBadge="47" tabBadgeStyle="light"></ion-tab>
     <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
     <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
@@ -41,7 +41,7 @@
 
 
   <!-- Icons right of text -->
-  <ion-tabs tabbarLayout="icon-right" no-navbar selectedIndex="0" light>
+  <ion-tabs tabbarLayout="icon-right" selectedIndex="0" light>
     <ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
     <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
     <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root" tabBadge="4" tabBadgeStyle="secondary"></ion-tab>
@@ -49,7 +49,7 @@
 
 
   <!-- Icons left of text -->
-  <ion-tabs tabbarLayout="icon-left" no-navbar dark>
+  <ion-tabs tabbarLayout="icon-left" dark>
     <ion-tab tabTitle="Recents" tabIcon="call" [root]="root" tabBadge="1" tabBadgeStyle="danger"></ion-tab>
     <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
     <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
@@ -57,7 +57,7 @@
 
 
   <!-- No icons -->
-  <ion-tabs tabbarLayout="icon-hide" no-navbar>
+  <ion-tabs tabbarLayout="icon-hide">
     <ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
     <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root" tabBadge="61" tabBadgeStyle="dark"></ion-tab>
     <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
@@ -65,7 +65,7 @@
 
 
   <!-- No overflow text -->
-  <ion-tabs no-navbar primary>
+  <ion-tabs primary>
     <ion-tab tabTitle="Indiana Jones and the Raiders of the Lost Ark" [root]="root"></ion-tab>
     <ion-tab tabTitle="Indiana Jones and the Temple of Doom" [root]="root"></ion-tab>
     <ion-tab tabTitle="Indiana Jones and the Last Crusade" [root]="root"></ion-tab>

demos/tabs/style.css

@@ -1,10 +1,12 @@
-ion-tabs[no-navbar] {
+ion-tabs {
   margin-bottom: 20px;
 }
 
-ion-tabs[no-navbar],
+ion-tabs,
-ion-tabs[no-navbar] ion-tabbar {
+ion-tabs ion-tabbar {
   position: relative;
   top: auto;
   height: auto;
+  visibility: visible;
+  opacity: 1;
 }

demos/textarea/index.ts

@@ -1,10 +1,19 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
-import {ionicBootstrap} from 'ionic-angular';
+
+import { ionicBootstrap } from 'ionic-angular';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class ApiDemoApp {}
+class ApiDemoPage {}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+class ApiDemoApp {
+  root = ApiDemoPage;
+}
 
 ionicBootstrap(ApiDemoApp);

demos/textarea/main.html

@@ -1,8 +1,8 @@
 <ion-header>
 
-  <ion-toolbar>
+  <ion-navbar>
     <ion-title>Textarea</ion-title>
-  </ion-toolbar>
+  </ion-navbar>
 
 </ion-header>
 

demos/title/index.ts

@@ -1,5 +1,5 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
-import {ionicBootstrap} from 'ionic-angular';
+import { ionicBootstrap } from 'ionic-angular';
 
 
 // Use the toolbar demo but pass in the demo name to change the title
@@ -7,10 +7,18 @@ import {ionicBootstrap} from 'ionic-angular';
 @Component({
   templateUrl: '../toolbar/main.html'
 })
-class ApiDemoApp {
+class ApiDemoPage {
   demo = "Title";
   favorites = "recent";
   apps = "free";
 }
 
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+class ApiDemoApp {
+  root = ApiDemoPage;
+}
+
 ionicBootstrap(ApiDemoApp);

demos/toast/index.ts

@@ -1,11 +1,12 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
-import {ionicBootstrap, Toast, NavController} from 'ionic-angular';
+
+import { ionicBootstrap, NavController, Toast } from 'ionic-angular';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class ApiPage {
+class ApiDemoPage {
   constructor(private nav: NavController) { }
 
   showToast(position: string) {
@@ -59,7 +60,7 @@ class ApiPage {
   template: '<ion-nav [root]="root"></ion-nav>'
 })
 class ApiDemoApp {
-  root = ApiPage;
+  root = ApiDemoPage;
 }
 
 ionicBootstrap(ApiDemoApp);

demos/toast/main.html

@@ -1,8 +1,8 @@
 <ion-header>
 
-  <ion-toolbar>
+  <ion-navbar>
     <ion-title>Toast</ion-title>
-  </ion-toolbar>
+  </ion-navbar>
 
 </ion-header>
 

demos/toggle/index.ts

@@ -1,11 +1,12 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
-import {ionicBootstrap} from 'ionic-angular';
+
+import { ionicBootstrap } from 'ionic-angular';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class ApiDemoApp {
+class ApiDemoPage {
   data = {
     frodo: true,
     sam: false,
@@ -21,4 +22,12 @@ class ApiDemoApp {
   };
 }
 
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+class ApiDemoApp {
+  root = ApiDemoPage;
+}
+
 ionicBootstrap(ApiDemoApp);

demos/toggle/main.html

@@ -1,8 +1,8 @@
 <ion-header>
 
-  <ion-toolbar>
+  <ion-navbar>
     <ion-title>Toggle</ion-title>
-  </ion-toolbar>
+  </ion-navbar>
 
 </ion-header>
 

demos/toolbar/index.ts

@@ -1,14 +1,23 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
-import {ionicBootstrap} from 'ionic-angular';
+
+import { ionicBootstrap } from 'ionic-angular';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class ApiDemoApp {
+class ApiDemoPage {
   demo = "Toolbar";
   favorites = "recent";
   apps = "free";
 }
 
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+class ApiDemoApp {
+  root = ApiDemoPage;
+}
+
 ionicBootstrap(ApiDemoApp);

demos/toolbar/main.html

@@ -1,19 +1,19 @@
 <ion-header>
 
-  <ion-toolbar>
+  <ion-navbar>
     <ion-title>{{demo}}</ion-title>
-  </ion-toolbar>
+  </ion-navbar>
 
 </ion-header>
 
 
 <ion-content>
 
-  <ion-toolbar>
+  <ion-toolbar no-border-top>
     <ion-title>Long title that never ends. It just goes on and on my friend.</ion-title>
   </ion-toolbar>
 
-  <ion-toolbar>
+  <ion-toolbar no-border-top>
     <ion-buttons start>
       <button>
         <ion-icon name="contact"></ion-icon>
@@ -30,7 +30,7 @@
     <ion-title>Default Buttons</ion-title>
   </ion-toolbar>
 
-  <ion-toolbar>
+  <ion-toolbar no-border-top>
     <ion-buttons start>
       <button danger>
         <ion-icon name="contact"></ion-icon>
@@ -47,7 +47,7 @@
     <ion-title>Colored Buttons</ion-title>
   </ion-toolbar>
 
-  <ion-toolbar>
+  <ion-toolbar no-border-top>
     <ion-buttons start>
       <button solid>
         <ion-icon name="contact"></ion-icon>
@@ -62,7 +62,7 @@
     </ion-buttons>
   </ion-toolbar>
 
-  <ion-toolbar>
+  <ion-toolbar no-border-top>
     <ion-buttons start>
       <button outline>
         <ion-icon name="contact"></ion-icon>
@@ -77,21 +77,21 @@
     <ion-title>Outline</ion-title>
   </ion-toolbar>
 
-  <ion-toolbar>
+  <ion-toolbar no-border-top>
     <button menuToggle>
       <ion-icon name="menu"></ion-icon>
     </button>
     <ion-title>Left Menu</ion-title>
   </ion-toolbar>
 
-  <ion-toolbar>
+  <ion-toolbar no-border-top>
     <ion-title>Right Menu</ion-title>
     <button menuToggle right>
       <ion-icon name="menu"></ion-icon>
     </button>
   </ion-toolbar>
 
-  <ion-toolbar *ngIf="demo != 'Title'">
+  <ion-toolbar no-border-top *ngIf="demo != 'Title'">
     <ion-buttons end>
       <button #button2 (click)="buttonClick(button2)">
         <ion-icon name="search"></ion-icon>
@@ -107,7 +107,7 @@
     </ion-segment>
   </ion-toolbar>
 
-  <ion-toolbar *ngIf="demo != 'Title'">
+  <ion-toolbar no-border-top *ngIf="demo != 'Title'">
     <ion-segment [(ngModel)]="apps">
       <ion-segment-button value="paid">
         Paid
@@ -121,11 +121,11 @@
     </ion-segment>
   </ion-toolbar>
 
-  <ion-toolbar *ngIf="demo != 'Title'">
+  <ion-toolbar no-border-top *ngIf="demo != 'Title'">
     <ion-searchbar></ion-searchbar>
   </ion-toolbar>
 
-  <ion-toolbar primary *ngIf="demo != 'Title'">
+  <ion-toolbar no-border-top primary *ngIf="demo != 'Title'">
     <ion-searchbar></ion-searchbar>
   </ion-toolbar>