diff --git a/demos/events/index.ts b/demos/events/index.ts
index 820a1c1903..eab37584b3 100644
--- a/demos/events/index.ts
+++ b/demos/events/index.ts
@@ -1,14 +1,15 @@
-import {App, IonicApp, Page, Events} from 'ionic-angular';
+import {ViewChild} from '@angular/core';
+import {App, Page, Events, Nav} from 'ionic-angular';
 
 @Page({templateUrl: 'login.html'})
 class Login {
-  constructor(events: Events) {
-    this.events = events;
+  user = {
+    name: "Administrator",
+    username: "admin"
+  };
+
+  constructor(private events: Events) {
 
-    this.user = {
-      name: "Administrator",
-      username: "admin"
-    };
   }
 
   login() {
@@ -20,8 +21,8 @@ class Login {
 
 @Page({templateUrl: 'logout.html'})
 class Logout {
-  constructor(events: Events) {
-    this.events = events;
+  constructor(private events: Events) {
+
   }
 
   logout() {
@@ -33,18 +34,17 @@ class Logout {
   templateUrl: 'main.html'
 })
 class ApiDemoApp {
-  constructor(app: IonicApp, events: Events) {
-    this.app = app;
-    this.events = events;
+  @ViewChild(Nav) nav: Nav;
 
-    this.rootView = Login;
-    this.loggedIn = false;
+  rootView = Login;
+  loggedIn = false;
 
-    this.pages = [
-      { title: 'Logout', component: Logout, showLoggedIn: true },
-      { title: 'Login', component: Login, showLoggedIn: false },
-    ];
+  pages = [
+    { title: 'Logout', component: Logout, showLoggedIn: true },
+    { title: 'Login', component: Login, showLoggedIn: false },
+  ];
 
+  constructor(private events: Events) {
     this.listenToLoginEvents();
   }
 
@@ -52,8 +52,7 @@ class ApiDemoApp {
     // find the nav component and set what the root page should be
     // reset the nav to remove previous pages and only have this page
     // we wouldn't want the back button to show in this scenario
-    let nav = this.app.getComponent('nav');
-    nav.setRoot(page.component);
+    this.nav.setRoot(page.component);
   }
 
   listenToLoginEvents() {
diff --git a/demos/output.wp.scss b/demos/output.wp.scss
index d51d931adf..09e22c5b88 100644
--- a/demos/output.wp.scss
+++ b/demos/output.wp.scss
@@ -33,4 +33,4 @@ $colors: (
   bright:     #FFC125
 );
 
-@import "../ionic/ionic.wp";
+@import "../src/ionic.wp";
diff --git a/src/components/menu/test/enable-disable/index.ts b/src/components/menu/test/enable-disable/index.ts
index b21e9858ba..4b1b634a76 100644
--- a/src/components/menu/test/enable-disable/index.ts
+++ b/src/components/menu/test/enable-disable/index.ts
@@ -1,4 +1,5 @@
-import {App, Page, IonicApp, MenuController} from '../../../../../src';
+import {ViewChild} from '@angular/core';
+import {App, Page, IonicApp, MenuController, Nav} from '../../../../../src';
 
 
 @Page({
@@ -18,24 +19,20 @@ class Page2 {
   templateUrl: 'main.html'
 })
 class E2EApp {
-  rootPage;
+  @ViewChild(Nav) nav: Nav;
+
   activeMenu: string;
+  page1 = Page1;
+  page2 = Page2;
+  rootPage = Page1;
 
-  constructor(app: IonicApp, menu: MenuController) {
-    this.app = app;
-    this.menu = menu;
-
-    this.page1 = Page1;
-    this.page2 = Page2;
-
-    this.rootPage = Page1;
+  constructor(private app: IonicApp, private menu: MenuController) {
     this.menu1Active();
   }
 
   openPage(p) {
     // Get the <ion-nav> by id
-    let nav = this.app.getComponent('nav');
-    nav.setRoot(p);
+    this.nav.setRoot(p);
   }
 
   menu1Active() {
diff --git a/src/components/menu/test/overlay/index.ts b/src/components/menu/test/overlay/index.ts
index 8dfb750756..8307bd598f 100644
--- a/src/components/menu/test/overlay/index.ts
+++ b/src/components/menu/test/overlay/index.ts
@@ -1,4 +1,5 @@
-import {App, IonicApp, Page} from '../../../../../src';
+import {ViewChild} from '@angular/core';
+import {App, Page, Nav} from '../../../../../src';
 
 
 @Page({templateUrl: 'page1.html'})
@@ -9,10 +10,12 @@ class Page1 {}
   templateUrl: 'main.html'
 })
 class E2EApp {
+  @ViewChild(Nav) nav: Nav;
+
+  rootView = Page1;
+
+  constructor() {
 
-  constructor(app: IonicApp) {
-    this.app = app;
-    this.rootView = Page1;
   }
 
   openPage(menu, page) {
@@ -21,7 +24,6 @@ class E2EApp {
 
     // Reset the content nav to have just this page
     // we wouldn't want the back button to show in this scenario
-    let nav = this.app.getComponent('nav');
-    nav.setRoot(page.component);
+    this.nav.setRoot(page.component);
   }
 }
diff --git a/src/components/menu/test/push/index.ts b/src/components/menu/test/push/index.ts
index 8dfb750756..8307bd598f 100644
--- a/src/components/menu/test/push/index.ts
+++ b/src/components/menu/test/push/index.ts
@@ -1,4 +1,5 @@
-import {App, IonicApp, Page} from '../../../../../src';
+import {ViewChild} from '@angular/core';
+import {App, Page, Nav} from '../../../../../src';
 
 
 @Page({templateUrl: 'page1.html'})
@@ -9,10 +10,12 @@ class Page1 {}
   templateUrl: 'main.html'
 })
 class E2EApp {
+  @ViewChild(Nav) nav: Nav;
+
+  rootView = Page1;
+
+  constructor() {
 
-  constructor(app: IonicApp) {
-    this.app = app;
-    this.rootView = Page1;
   }
 
   openPage(menu, page) {
@@ -21,7 +24,6 @@ class E2EApp {
 
     // Reset the content nav to have just this page
     // we wouldn't want the back button to show in this scenario
-    let nav = this.app.getComponent('nav');
-    nav.setRoot(page.component);
+    this.nav.setRoot(page.component);
   }
 }
diff --git a/src/components/menu/test/reveal/index.ts b/src/components/menu/test/reveal/index.ts
index 8dfb750756..8307bd598f 100644
--- a/src/components/menu/test/reveal/index.ts
+++ b/src/components/menu/test/reveal/index.ts
@@ -1,4 +1,5 @@
-import {App, IonicApp, Page} from '../../../../../src';
+import {ViewChild} from '@angular/core';
+import {App, Page, Nav} from '../../../../../src';
 
 
 @Page({templateUrl: 'page1.html'})
@@ -9,10 +10,12 @@ class Page1 {}
   templateUrl: 'main.html'
 })
 class E2EApp {
+  @ViewChild(Nav) nav: Nav;
+
+  rootView = Page1;
+
+  constructor() {
 
-  constructor(app: IonicApp) {
-    this.app = app;
-    this.rootView = Page1;
   }
 
   openPage(menu, page) {
@@ -21,7 +24,6 @@ class E2EApp {
 
     // Reset the content nav to have just this page
     // we wouldn't want the back button to show in this scenario
-    let nav = this.app.getComponent('nav');
-    nav.setRoot(page.component);
+    this.nav.setRoot(page.component);
   }
 }
diff --git a/src/components/nav/test/nested/index.ts b/src/components/nav/test/nested/index.ts
index 7bda405e09..57d229b3ed 100644
--- a/src/components/nav/test/nested/index.ts
+++ b/src/components/nav/test/nested/index.ts
@@ -1,5 +1,6 @@
+import {ViewChild} from '@angular/core';
 import {App, NavParams, NavController, ViewController, MenuController} from '../../../../../src';
-import {Page, Config, IonicApp} from '../../../../../src';
+import {Page, Config, Nav} from '../../../../../src';
 
 
 @Page({
@@ -46,26 +47,28 @@ export class Login {
   `
 })
 export class Account {
-  rootPage;
+  @ViewChild('account-nav') accountNav: Nav;
+
+  rootPage = Dashboard;
+
+  constructor(private menu: MenuController, private nav: NavController) {
 
-  constructor(private app: IonicApp, private menu: MenuController) {
-    this.rootPage = Dashboard;
   }
 
   goToProfile() {
-    this.app.getComponent('account-nav').setRoot(Profile).then(() => {
+    this.accountNav.setRoot(Profile).then(() => {
       this.menu.close();
     });
   }
 
   goToDashboard() {
-    this.app.getComponent('account-nav').setRoot(Dashboard).then(() => {
+    this.accountNav.setRoot(Dashboard).then(() => {
       this.menu.close();
     });
   }
 
   logOut() {
-    this.app.getComponent('root-nav').setRoot(Login, null, { animate: true });
+    this.nav.parent.setRoot(Login, null, { animate: true });
   }
 }
 
@@ -85,13 +88,13 @@ export class Account {
   `
 })
 export class Dashboard {
-  constructor(private app: IonicApp, private nav: NavController) {}
+  constructor(private nav: NavController) {}
 
   goToProfile() {
     this.nav.push(Profile);
   }
   logOut() {
-    this.app.getComponent('root-nav').setRoot(Login, null, {
+    this.nav.parent.setRoot(Login, null, {
       animate: true,
       direction: 'back'
     });
@@ -114,13 +117,14 @@ export class Dashboard {
   `
 })
 export class Profile {
-  constructor(private app: IonicApp, private nav: NavController) {}
+  constructor(private nav: NavController) {}
 
   goToDashboard() {
     this.nav.push(Dashboard);
   }
+
   logOut() {
-    this.app.getComponent('root-nav').setRoot(Login, null, {
+    this.nav.parent.setRoot(Login, null, {
       animate: true,
       direction: 'back'
     });
@@ -132,9 +136,9 @@ export class Profile {
   template: `<ion-nav id="root-nav" [root]="rootPage" swipeBackEnabled="false"></ion-nav>`
 })
 class E2EApp {
-  rootPage;
+  rootPage = Login;
 
   constructor() {
-    this.rootPage = Login;
+
   }
 }
diff --git a/src/components/segment/test/swipe/index.ts b/src/components/segment/test/swipe/index.ts
index fff1a0e30e..46748c766e 100644
--- a/src/components/segment/test/swipe/index.ts
+++ b/src/components/segment/test/swipe/index.ts
@@ -1,40 +1,42 @@
 import {Validators, Control, ControlGroup} from '@angular/common';
 import {Http} from '@angular/http';
-import {App, Page, IonicApp, NavController} from '../../../../../src';
+import {ViewChild} from '@angular/core';
+import {App, Page, NavController, Slides} from '../../../../../src';
 
 
 @Page({
   templateUrl: 'main.html',
 })
 class SegmentPage {
-  constructor(app: IonicApp) {
-    this.app = app;
+  @ViewChild('loopSlider') sliderComponent: Slides;
+
+  selectedSegment = "first";
+  slides = [
+    {
+      id: "first",
+      title: "First Slide"
+    },
+    {
+      id: "second",
+      title: "Second Slide"
+    },
+    {
+      id: "third",
+      title: "Third Slide"
+    }
+  ];
+
+  constructor() {
 
-    this.selectedSegment = "first";
-    this.slides = [
-      {
-        id: "first",
-        title: "First Slide"
-      },
-      {
-        id: "second",
-        title: "Second Slide"
-      },
-      {
-        id: "third",
-        title: "Third Slide"
-      }
-    ];
   }
 
   onSegmentChanged(segmentButton) {
     console.log("Segment changed to", segmentButton.value);
 
-    this.sliderComponent = this.app.getComponent('loopSlider');
     const selectedIndex = this.slides.findIndex((slide) => {
       return slide.id === segmentButton.value;
     });
-    this.sliderComponent.slider.slideTo(selectedIndex);
+    this.sliderComponent.slideTo(selectedIndex);
   }
 
   onSlideChanged(slider) {
@@ -47,11 +49,12 @@ class SegmentPage {
 
 
 @App({
-  pages: [SegmentPage],
   template: `<ion-nav [root]="root"></ion-nav>`
 })
 class MyApp {
+  root = SegmentPage;
+
   constructor() {
-    this.root = SegmentPage;
+
   }
 }
diff --git a/src/components/segment/test/swipe/main.html b/src/components/segment/test/swipe/main.html
index 4890169304..e55aaac3c4 100644
--- a/src/components/segment/test/swipe/main.html
+++ b/src/components/segment/test/swipe/main.html
@@ -19,7 +19,7 @@
 
 <ion-content padding>
 
-  <ion-slides (change)="onSlideChanged($event)" id="loopSlider">
+  <ion-slides (change)="onSlideChanged($event)" #loopSlider>
     <ion-slide *ngFor="let slide of slides">
       <h1>{{ slide.title }}</h1>
     </ion-slide>