Binding tabTitle to a variable doesn't update the title of the tab

Ionic Framework ionic-v3
1

Hello,

I’m having some issues translating ion-tab title using ng2-translate.

In tabs.html I have one tab defined as:

<ion-tabs>
  <ion-tab [root]="tab1" [tabTitle]="title1" tabIcon="person"></ion-tab>  
</ion-tabs>

In tab.ts I’m defining the title1 variable with no initial value and I’m getting the actual translation through an observable:

import {Component, OnInit} from "@angular/core";
import {AccountPage} from "../account/account";
import {TranslateService} from "ng2-translate";

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage implements OnInit {
  tab1: any = AccountPage;
  title1: string;

  constructor(private translate: TranslateService) {}

  ngOnInit() {
    this.translate.get('account').subscribe((res: string) => {
      this.title1 = res;
      console.log('title1: ',this.title1);
    });
  }
}

The translation file is en.json:

{
  "account": "Account"
}

In the browser console I can see the log line: title1: Account but the title of the tab is not updated.

It only works when I assign some random value to title1:

title1: string = 'anything';

In this case even though title1 is initially 'anything', I can see the expected value (Account) as the tab’s title, after the ng2-translate observable runs.

image
ion-tab-title.png704×118 8.19 KB

I’ve also tried the following syntax and it doesn’t work either:

[tabTitle]="'account' | translate"

Any idea why it only works when I define title1 with some random value?

Thanks

1 Like
2

I encountered this issue today as well.

It seems like tabTitle uses the initial value that is provided to it and simply ignore any further bindings.

I’m using ng2-translate to internationliaze tab titles.

@frontweb Have you found any workaround to this?

EDIT:

I found this issue and its workaround works for me!

3

I ended up bundling the translations files with the main JS bundle so the translations are available right away now, when the Tabs component renders. ng2-translate doesn’t load them from disk anymore, so there’s no delay in retrieving the translation for a key.

The issue you found seems to highlight the source of the problem. It’s worth following it, thanks.

4

I know this question happened a long time ago, but if you declare the variables inside the constructor everything works ok.