ionic back button does not change text dynamically

Question

After setting back button text using config,
it does not reflect right away in nav bar.
Have to pop and push the page again.

playground:
https://stackblitz.com/edit/backbuttonbug.
you can see in contact page,
setting back button text does not reflect in self page and even in other nav stack

code:
previous page:

export class AboutPage {  
  constructor(public navCtrl: NavController) {}

  contact() {  
    this.navCtrl.push(ContactPage);   
  }   
}

export class ContactPage {  
  constructor(public navCtrl: NavController,
    public config: Config) {}

  toChinese() {
    this.config.set("backButtonText", '返回');
  }

  toEnglish() {
    this.config.set("backButtonText", 'back');
  }
}

<ion-header>
  <ion-navbar>
    <ion-title>
      Contact
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <button ion-button (tap)="toChinese()">toChinese</button>
  <button ion-button (tap)="toEnglish()">toEnglish</button>
</ion-content>

I suspect this is a bug and have opened a issue:
https://github.com/ionic-team/ionic-v3/issues/976.
and find another issue similar:
https://github.com/ionic-team/ionic/issues/7043

is that a ionic bug / my program bug?
hope to see advice

Please add a minimal reproducible example here and not an external link — Suraj Rao

Simon L. Brazell Simon L. Brazell · Accepted Answer · 2019-02-25T11:50:00

You haven't added any code so I'm not 100% sure of what you've tried already but try this:

import { ViewController } from 'ionic-angular';

...

  ionViewDidEnter() {
    this.viewCtrl.setBackButtonText('Some dynamic button text');
  }

Edit

Sorry didn't see your Stackblitz example, this works:

import { Component } from '@angular/core';
import { NavController, Config, ViewController } from 'ionic-angular';

@Component({
  selector: 'page-contact',
  templateUrl: 'contact.html'
})
export class ContactPage {

  constructor(public navCtrl: NavController,
    public config: Config, 
    private viewCtrl: ViewController) {

  }

  toChinese() {
    this.viewCtrl.setBackButtonText('返回');
  }

  toEnglish() {
    this.viewCtrl.setBackButtonText('Back');
  }

}

ionic back button does not change text dynamically

1 Answers