Global NavBar in the dynamic name change Ionic 2

Question

I use Nav in ionic version 2. I need to save the global title with left and right menus. Currently my menu is working correctly, but I have a little problem. When I change the root pages, I would like to change the title of the global header, but I cannot figure out how to do this. I have the following code:

dashboard.component.html - Page containing Nav

<ion-header>
  <ion-navbar>
      <button menuToggle="left" start>
              <img src="build/images/brite-logo-bulb.png" width="auto" height="25px"/>  
      </button>
    <ion-title>
    // how can i change the title dynamically
    </ion-title>
      <button menuToggle="right" end (click)="clearNewAlerts()">
        <ion-icon name="information-circle">
          <div class="notice-circle" *ngIf="newAlerts != 0">{{newAlerts}}</div>          
        </ion-icon>
      </button>
  </ion-navbar>
</ion-header>

<!--Left Navigation Menu HTML-->
<ion-menu [content]="content" type="overlay">
  <img src="build/images/brite-logo.png" width="100px" height="auto"/>
  <ion-content>
    <div class="menu-greeting">Hello, {{firstName}}!</div>
    <hr class="brite-nav"/>
    <ion-list no-lines>
      <button class="brite-nav-item" ion-item (click)="openPage('home')" menuToggle>
        Home
      </button>
      <button class="brite-nav-item" ion-item (click)="openPage('bills')" menuToggle>
        Bills
      </button>
    </ion-list>
    <hr class="brite-nav"/>
  </ion-content>
</ion-menu>

<!--Right Alerts Menu-->
<ion-menu  [content]="content" side="right" class="alerts" type="overlay">
  <brt-alerts></brt-alerts>
</ion-menu>

<!--Navigation View-->
<ion-nav id="nav" #content [root]="rootPage" class="dashboard-wrap"></ion-nav>

I'm not sure how to dynamically change <ion-title></ion-title>when going to a new page.

dashboard.compontent.ts

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;}
    }
}

Answer 1

openPage() ,

title = 'Initial Title'
pages = {
   home: HomeComponent,
   contact: ContactComponent,
   ....
}

openPage(page){
   this.rootPage = this.pages[page]
   this.title = page
}

:

<ion-title>
   {{ title }}
</ion-title>

, , :

title = 'Initial Title'
pages = {
   home: {
      component: HomeComponent,
      title: 'Title'
   },
   ....
}

openPage(page){
   this.rootPage = this.pages[page].component
   this.title = this.pages[page].title
}

Tab ( ):

import { Events } from 'ionic-angular'

...
@Component({...})
export class TabsPage {

   constructor(events: Events) {
      this.events = events
   }
}

:

<ion-tabs (ionChange)="events.publish('titleChange', title)"></ion-tabs>

titleChange:

ngOnInit() {
   this.events.subscribe('titleChange', title => this.title = title)
}