Ionic-framework: ng2-translate and tabs

[appdezign]

Short description of the problem:

When I use ng2-translate to set the tabTitle dynamically (using pipe), at first it seems as if the pipe does not work, but when I check in the chrome developer tools, I see that if fact it does work, but the span 'tab-button-text' is still hidden (display: none).

Because the tabTitle is set by an observable, Ionic adds the 'icon-only' class instead of the 'has-title' class, and therefore the span 'tab-button-text' stays hidden.

What behavior are you expecting?

I would expect the class 'has-title' instead of 'icon-only', when I set my tab-title dynamically.

Steps to reproduce:

1. setup ng2-translate
2. add translation files
3. add pipe to tabTitle

<ion-tab [root]="tab1Root" [tabTitle]="'TABS.HOME'|translate" tabIcon="home"></ion-tab>

Workaround
I use CSS to force the TabTitle to be displayed correctly:

.tab-button-text {
        display:block;
}

Which Ionic Version?

Ionic 2.0.0 RC0

Ionic info

Cordova CLI: 6.3.0
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-rc.0
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v6.7.0
Xcode version: Xcode 8.0 Build version 8A218a

[alamusi]

I have exactly the same issue. It appears that ion-tab input (maybe other components too) doesn't bind well with pipe...

My workaround is as follows:

1. inject TranslateService into the page.ts. i.e. constructor(public ts: TranslateService)
2. change pipe into function call. i.e. [tabTitle]="ts.instant(root.title)"

this prevents us from forcing the theme file

[appdezign]

I don't think the binding itself is the problem. If you look in your developer tools you'll see that the translated value is there, but the span is just hidden.

Ionic checks if there's a value for tabTitle, and if there's not a value yet (because it's a promise), it sets the tab to icon-only.

[alamusi]

you are right that the root cause is likely to be with sequencing. i recall seeing the generated span element in both RC0 and beta11, while the title class was missing on the tab element, as you indicated in the issue.

[Bouzmine]

@appdezign My workaround is to put a space at the end like so :

<ion-tab [root]="tab1Root" tabTitle="{{'TAB_PROJECT' | translate}} " tabIcon="copy"></ion-tab>

[mestremuten]

Found this bug also in RC5. Looks like when tab-buttons are initialized, they check if there's tabTitle once and never check again.

tabTitle is an @Input, imho it should watch it for changes. Same for tabIcon.

@Bouzmine This works, thanks.

[shawnlan]

Still has this bug in 2.0.1.

[nonumber1989]

@Bouzmine Your workaround is work!
THX

[vkniazeu]

Still an issue in 2.3.0.
Concatenating a space before or after the interpolation braces works as a workaround.
tabTitle="{{'KEY' | translate}}" // does NOT work
tabTitle=" {{'KEY' | translate}}" // works
tabTitle="{{'KEY' | translate}} " // works

[N1XUS]

Instead of space you can use zero-width joiner ‍
Like this:
<ion-tab [root]="settings" tabTitle="{{ 'Settings' | translate }}&zwnj;" tabIcon="cog" tabsHideOnSubPages="true"></ion-tab>

[Abildtoft]

Issue still exists in 3.5.0

[mortenson]

Adding a space after }} works for me with 3.6.0.

[BorntraegerMarc]

This should definitely not be an issue after being open for 1 year 😄 Can we get an ETA on a fix for this issue?

[danilocecilia]

Just wasted lots of hours trying to figure it out this problem myself and then realised the problem was actually the ionic code! ;(

[marutifh]

@jgw96
Still there is no updates on this!? expecting a solution for this issue :(

[ionitron-bot[bot]]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/131