CODEWITHSUNDEEP
ionic-frameworkionic3
user3042713
user3042713

Reputation: 175

ionic back button does not change text dynamically

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

Next page: 

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

Upvotes: 0

Views: 535

Answers (1)

Simon L. Brazell
Simon L. Brazell

Reputation: 1272

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

}

Upvotes: 1

Related Questions