Global NavBar in Ionic 2 dynamically changing title

angular, ionic2

Solution

I would change your `openPage()` method a bit like this and added a class property title which I would use in template

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

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

in template:

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

Or if you need other titles, you can make it like this:

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

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

Possible solution for Tab Component (code is not accurate):

import { Events } from 'ionic-angular'

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

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

In tabs template:

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

In your dashboard component you also import and inject Events and subscribe to titleChange event:

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

Problem

I'm using the Nav 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: 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 the `<ion-title></ion-title>` when navigating 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;} } } ```

Original source