translate back button ionic 2

Question

I changed the name of the Back button in ionic 2 but does somebody know how you can translate this button with ng2-translate?

this.config.set('backButtonText', 'Go Back'); // < want to translate this with ng2-translate.

Answer 1

You can translate the back text like this (assuming you have already successfully implemented the ng2-translate module) in your app.ts:

initializeApp() {
    this.platform.ready().then(() => {
        this.config.set('backButtonText', this.translate.get('ui.general.back')['value']);
    });
}

It is neccessary to set this in the ready-function because the localization loads async and this is the place where you know that the localization files have been loaded and the module is ready to work.

Obviously I have set the translation text in the appropriate json-files under ui.general.back ;)

If you have not yet accessed the config then you need to import it:

import {..., Config} from 'ionic-angular';

Answer 2

In you app.module.ts:

@NgModule({
declarations: [
    MyApp
],
imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp, {
        platforms: {
            ios: {
                backButtonText: 'Voltar'
            }
        }
    }),
],
bootstrap: [IonicApp],
entryComponents: [
    MyApp
],
providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
]})

Answer 3

I had to use it like this (in app.component.ts)

this.platform.ready().then(() => {
  this.translate.get('GENERIC.BACK').subscribe(backLabel => {
    this.config.set('ios', 'backButtonText', backLabel);
  });
});

Answer 4

You can translate the back text like this, put on app.component.ts

ngAfterViewInit() {
this.navCtrl.viewWillEnter.subscribe((view) => {
  let parentView = this.navCtrl.getPrevious(view);

  if (parentView) {
    this.translate.get('nav.back.label').first().subscribe(
      moduleName => { this.navCtrl.getActive().getNavbar().setBackButtonText(moduleName); }
    );
  }
}); }