title: Global NavBar in Ionic 2 dynamically changing title
body: <p>I'm using the <a href="https://ionicframework.com/docs/v2/api/components/nav/Nav/" rel="nofollow">Nav</a> in ionic 2. I need to retain a global header with a left and right menu. Currently my menu works properly, but I have a small issue. As I change root pages I would like to change the title of the global header, but I can't seem to understand how to do so. I have the following code:</p>
  
  <p><strong>dashboard.component.html - Page Containing Nav</strong></p>
  
  <pre><code>&lt;ion-header&gt;
    &lt;ion-navbar&gt;
        &lt;button menuToggle="left" start&gt;
                &lt;img src="build/images/brite-logo-bulb.png" width="auto" height="25px"/&gt;  
        &lt;/button&gt;
      &lt;ion-title&gt;
      // how can i change the title dynamically
      &lt;/ion-title&gt;
        &lt;button menuToggle="right" end (click)="clearNewAlerts()"&gt;
          &lt;ion-icon name="information-circle"&gt;
            &lt;div class="notice-circle" *ngIf="newAlerts != 0"&gt;{{newAlerts}}&lt;/div&gt;          
          &lt;/ion-icon&gt;
        &lt;/button&gt;
    &lt;/ion-navbar&gt;
  &lt;/ion-header&gt;
  
  &lt;!--Left Navigation Menu HTML--&gt;
  &lt;ion-menu [content]="content" type="overlay"&gt;
    &lt;img src="build/images/brite-logo.png" width="100px" height="auto"/&gt;
    &lt;ion-content&gt;
      &lt;div class="menu-greeting"&gt;Hello, {{firstName}}!&lt;/div&gt;
      &lt;hr class="brite-nav"/&gt;
      &lt;ion-list no-lines&gt;
        &lt;button class="brite-nav-item" ion-item (click)="openPage('home')" menuToggle&gt;
          Home
        &lt;/button&gt;
        &lt;button class="brite-nav-item" ion-item (click)="openPage('bills')" menuToggle&gt;
          Bills
        &lt;/button&gt;
      &lt;/ion-list&gt;
      &lt;hr class="brite-nav"/&gt;
    &lt;/ion-content&gt;
  &lt;/ion-menu&gt;
  
  &lt;!--Right Alerts Menu--&gt;
  &lt;ion-menu  [content]="content" side="right" class="alerts" type="overlay"&gt;
    &lt;brt-alerts&gt;&lt;/brt-alerts&gt;
  &lt;/ion-menu&gt;
  
  &lt;!--Navigation View--&gt;
  &lt;ion-nav id="nav" #content [root]="rootPage" class="dashboard-wrap"&gt;&lt;/ion-nav&gt;
  </code></pre>
  
  <p>I'm not sure how to dynamically change the <code>&lt;ion-title&gt;&lt;/ion-title&gt;</code> when navigating to a new page.</p>
  
  <p><strong>dashboard.compontent.ts</strong></p>
  
  <pre><code>export class DashboardComponent implements OnInit{
  
      // private properties
      private rootPage: any;
  
      constructor(private profileService: ProfileService, private alertsService: AlertsService){
          this.rootPage = UsageTabs;//temporarily
          this.setWelcomeName();
      }
      /**
       * @name openPage
       * @description
       * Sets the [root] page to selected page from the menu.
       */
      openPage(page){
          if(page === 'home') {this.rootPage = HomeComponent; return;}
          if(page === 'contact') {this.rootPage = ContactComponent; return;}
          if(page === 'profile') {this.rootPage = ProfileComponent; return;}
          if(page === 'usage') {this.rootPage = UsageTabs; return;}
          if(page === 'share') {this.rootPage = ShareUsageComponent; return;}
      }
  }
  </code></pre>