fix(nav): use setRoot when root property changes

Closes #5668

Author: adamdbradley

ionic/components/nav/nav.ts

@@ -106,11 +106,8 @@ import {ViewController} from './view-controller';
   template: '<div #contents></div>'
 })
 export class Nav extends NavController {
-
-  /**
-   * @private
-   */
-  @Input() root: Type;
+  private _root: Type;
+  private _hasInit: boolean = false;
 
   constructor(
     @Optional() hostNavCtrl: NavController,
@@ -134,15 +131,32 @@ export class Nav extends NavController {
     }
   }
 
+  /**
+   * @input {Page} The Page component to load as the root page within this nav.
+   */
+  @Input()
+  get root(): Type {
+    return this._root;
+  }
+  set root(page: Type) {
+    this._root = page;
+
+    if (this._hasInit) {
+      this.setRoot(page);
+    }
+  }
+
   /**
    * @private
    */
   ngOnInit() {
-    if (this.root) {
-      if (typeof this.root !== 'function') {
+    this._hasInit = true;
+
+    if (this._root) {
+      if (typeof this._root !== 'function') {
         throw 'The [root] property in <ion-nav> must be given a reference to a component class from within the constructor.';
       }
-      this.push(this.root);
+      this.push(this._root);
     }
   }
 

ionic/components/nav/test/init-async/index.ts

@@ -0,0 +1,26 @@
+import {App, Page} from 'ionic-angular';
+
+
+@Page({
+  template: `
+    <ion-content padding text-center>
+      Page be loaded!
+    </ion-content>
+  `
+})
+class AsyncPage {}
+
+
+@App({
+  template: `<ion-nav [root]="root"></ion-nav>`
+})
+class E2EApp {
+  root;
+
+  constructor() {
+    setTimeout(() => {
+      this.root = AsyncPage;
+    }, 1000);
+
+  }
+}