ionic 2 - Dynamic ion-title

Question

What is the best approach to dynamically setting the title in my ion-navbar if I have the navbar set in the root HTML ? e.g.

app.html

<ion-header>
  <ion-navbar>
    <ion-title>{{some title here}}</ion-title>
  </ion-navbar>
</ion-header>

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

<ion-footer>
</ion-footer>

Currently, I am giving each component view it's own ion-navbar in its corresponding HTML file, but the title is flickering between views and I think this is because a new navbar is being created each time.

Any advice would be great.

Thaanks!

Answer 1

Currently, I am giving each component view it's own ion-navbar in its corresponding HTML file

That's exactly how you should handle the ion-navbar. If you were thinking in defining a custom component to contain the navbar and reuse it in the entire app, don't do it (@mhartington from Ionic team explains why you shouldn't do that in this SO post).

In order to solve the flickering issue, please try by removing the ion-header from the app.html file and just leave the

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

Then in every page, include the header with the proper title:

<ion-header>
  <ion-navbar>
    <ion-title>{{ pageTitle }}</ion-title>
  </ion-navbar>
</ion-header>