From c16e56634d904f13a947855969bea0df0bd1ec7e Mon Sep 17 00:00:00 2001
From: Mike Hartington <mhartington@users.noreply.github.com>
Date: Wed, 16 Nov 2016 09:00:56 -0800
Subject: [PATCH] docs(navController): add note about overlay components

---
 src/navigation/nav-controller.ts | 50 +++++++++++++++++++++++++-------
 1 file changed, 40 insertions(+), 10 deletions(-)

diff --git a/src/navigation/nav-controller.ts b/src/navigation/nav-controller.ts
index 1c358a2add..ff7f76d4a4 100644
--- a/src/navigation/nav-controller.ts
+++ b/src/navigation/nav-controller.ts
@@ -18,7 +18,7 @@ import { ViewController } from './view-controller';
  * arbitrary locations in history.
  *
  * The current page is the last one in the array, or the top of the stack if we
- * think of it that way.  [Pushing](#push) a new page onto the top of the
+ * think of it that way. [Pushing](#push) a new page onto the top of the
  * navigation stack causes the new page to be animated in, while [popping](#pop)
  * the current page will navigate to the previous page in the stack.
  *
@@ -33,7 +33,6 @@ import { ViewController } from './view-controller';
  *
  * ```typescript
  * import { Component } from `@angular/core`;
- * import { ionicBootstrap } from 'ionic-angular';
  * import { StartPage } from './start-page';
  *
  * @Component(
@@ -41,13 +40,12 @@ import { ViewController } from './view-controller';
  * })
  * class MyApp {
  *   // set the rootPage to the first page we want displayed
- *   private rootPage: any = StartPage;
+ *   public rootPage: any = StartPage;
  *
  *   constructor(){
  *   }
  * }
  *
- * ionicBootstrap(MyApp);
  * ```
  *
  * ### Injecting NavController
@@ -85,25 +83,57 @@ import { ViewController } from './view-controller';
  *
  * ```typescript
  *
- * import { App, ViewChild } from '@angular/core';
+ * import { Component, ViewChild } from '@angular/core';
  * import { NavController } from 'ionic-angular';
  *
- * @App({
+ * @Component({
  *    template: '<ion-nav #myNav [root]="rootPage"></ion-nav>'
  * })
  * export class MyApp {
  *    @ViewChild('myNav') nav: NavController
- *    private rootPage = TabsPage;
+ *    public rootPage = TabsPage;
  *
  *    // Wait for the components in MyApp's template to be initialized
- *    // In this case, we are waiting for the Nav with id="my-nav"
- *    ngAfterViewInit() {
+ *    // In this case, we are waiting for the Nav with reference variable of "#myNav"
+ *    ngOnInit() {
  *       // Let's navigate from TabsPage to Page1
  *       this.nav.push(Page1);
  *    }
  * }
  * ```
  *
+ * ### Navigating from an Overlay Component
+ * What if you wanted to navigate from an overlay component (popover, modal, alert, etc)?
+ * In this example, we've displayed a popover in our app. From the popover, we'll get a
+ * reference of the root `NavController` in our app, using the `getRootNav()` method.
+ *
+ *
+ * ```typescript
+ * import { Component } from '@angular/core';
+ * import { App, ViewController } from 'ionic-angular';
+ *
+ * @Component({
+ *     template: `
+ *     <ion-content>
+ *       <h1>My PopoverPage</h1>
+ *       <button ion-button (click)="pushPage()">Call pushPage</button>
+ *      </ion-content>
+ *     `
+ *   })
+ *   class PopoverPage {
+ *     constructor(
+ *       public viewCtrl: ViewController
+ *       public appCtrl: App
+ *     ) {}
+ *
+ *     pushPage() {
+ *       this.viewCtrl.dismiss();
+ *       this.appCtrl.getRootNav().push(SecondPage);
+ *     }
+ *   }
+ *```
+ *
+ *
  * ## View creation
  * Views are created when they are added to the navigation stack.  For methods
  * like [push()](#push), the NavController takes any component class that is
@@ -195,7 +225,7 @@ import { ViewController } from './view-controller';
  *   <ion-content>I'm the other page!</ion-content>`
  * })
  * class OtherPage {
- *    constructor(private navCtrl: NavController ){
+ *    constructor(public navCtrl: NavController ){
  *    }
  *
  *    popView(){