Translation inside select options

[skoff]

This is my problem: I’m using ng2-translate which works great. But i’m facing this issue where if I have translations inside my options of a select item when I switch language the select is not affected.

Profile.html

<ion-item>
        <ion-label>{{ "Gender" | translate }}</ion-label>
        <ion-select [(ngModel)]="profile.Gender">
          <ion-option *ngFor="#kv of genders" value="{{kv.value}}">{{kv.name | translate}}</ion-option>
        </ion-select>
</ion-item>

Profile.ts

import {TranslatePipe} from 'ng2-translate/ng2-translate';

@Page({
  templateUrl: 'build/pages/profile/profile.html',
  providers: [UserService],
  pipes: [TranslatePipe]
})
export class ProfilePage {
  profile = {};
  genders = [
    {value: "M", name: "Male"},
    {value: "F", name: "Female"}
  ];

Also I have the proper translation in my file (en.json and fr.json) because if I load the profile page with either en or fr as default language the text is OK in the select options. But if i try to change it on the fly it doesn’t work!

Any ideas how I could get this to work?

Thanks!

[bengtler]

try the following code for your ion-options:

<ion-option *ngFor="#kv of genders" [value]="kv.value">{{kv.name | translate}}</ion-option>

[property] means data-binding
without any curls you store simple a string

[skoff]

Thanks for your answer. Unfortunately it doesn’t seems to fix the issue. But from what I can see the problem is only when displaying the value on the selected item. If I click the select to choose either male or female it works fine.

Screenshot:

As you can see in the upper right of the screenshot it shows “Homme” but everything is translated to english. But in the select box where I can choose the gender it’s properly translated.

Here’s my updated code:

Profile.html

<ion-item>
        <ion-label>{{ "Gender" | translate }}</ion-label>
        <ion-select [(ngModel)]="profile.Gender">
          <ion-option *ngFor="let kv of genders" [value]="kv.value">{{kv.name | translate}} - {{kv.name}}</ion-option>
        </ion-select>
</ion-item>

Profile.ts

export class ProfilePage {
  profile = {};
  genders = [
    {value: "M", name: "GenderM"},
    {value: "F", name: "GenderF"}
  ];

en.json

{
    "GenderM": "Male",
    "GenderF": "Female",
}

[george_eleutheriou]

in my app the translation pipe works fine in ion-option. Here is my code:

<ion-item> <ion-label>{{'ResultsPageSelectLabel' | translate}}</ion-label> <ion-select interface="action-sheet" [(ngModel)]="order"> <ion-option value="distance">{{'ResultsPageSelectOption1' | translate}}</ion-option> <ion-option value="-distance">{{'ResultsPageSelectOption2' | translate}}</ion-option> <ion-option value="-rating">{{'ResultsPageSelectOption3' | translate}}</ion-option> <ion-option value="rating">{{'ResultsPageSelectOption4' | translate}}</ion-option> </ion-select> </ion-item>

[skoff]

@george_eleutheriou Your code is not using any ngFor loop and I’m pretty sure this is where the issue come from.

[george_eleutheriou]

yes i am sorry. i use translation with ngFor loop to translate the names of the pages in the side menu (ion-menu). My code is like this:

<button ion-item *ngFor="let p of pages" (click)="openPage(p)"> <ion-icon name={{p.icon}} item-left></ion-icon> {{p.title | translate}} </button>

in the app.ts:

this.pages = [ { title: 'Page1Title', icon: 'home', component: HomePage }, { title: 'Page2Title', icon: 'ios-information-circle', component: InfoPage }, { title: 'Page3Title', icon: 'mail', component: ContactPage }, { title: 'Page4Title', icon: 'paper', component: AboutPage } ];

and the json file:

{ "Page1Title": "Home", "Page2Title": "Info", "Page3Title": "Contact", "Page4Title": "About" }

i hope it helps

[skoff]

@george_eleutheriou Again, this is not using the select component. My issue is with this component. It’s only happening for the translation of the current selected value which is displayed. If I click the select component to change the value then all select options are translated correctly but not my selected option.

Here you can see what I’m talking about, on the upper right corner it’s still “Homme” but in the options I can click it’s translated properly:

[george_eleutheriou]

Ok i tried to convert my ion-option in my app to use *ngFor and works perfectly with the translation pipe. Here is the code is used:

<ion-select [(ngModel)]="order"> <ion-option *ngFor="let option of options" value={{option.value}}>{{ option.name | translate}}</ion-option> </ion-select>

and in the .ts:

options: Array<{ name: string, value: string }>; this.options = [ { name: 'ResultsPageSelectOption1', value: 'distance' }, { name: 'ResultsPageSelectOption2', value: '-distance' }, { name: 'ResultsPageSelectOption3', value: '-rating' }, { name: 'ResultsPageSelectOption4', value: 'rating' } ];

and in json:

{ "ResultsPageSelectOption1": "Nearest", "ResultsPageSelectOption2": "Farest", "ResultsPageSelectOption3": "Highest Rating", "ResultsPageSelectOption4": "Lowest Rating" }

[skoff]

@george_eleutheriou

order

what did you set you “order” property to? How did you initialize it?

[george_eleutheriou]

in my page.ts:

private order: string; .................... this.order = "distance";

i use it to filter some results of list with a custom pipe

[skoff]

@george_eleutheriou still not able to make this work… is yours properly showing the value before clicking on the select to change the selected option?

[george_eleutheriou]

that’s my only problem so far. before i added translation pipe i could see the default value before clicking on it. after i could not. it just shows up when i click on it first. But translation works fine.

[skoff]

could you add a screenshot please? And then I think we could open an issue on the repository.

[george_eleutheriou]

sure i will post here some screenshots but later when i get home.
at least translation works now?

[george_eleutheriou]

Here is before i select any value. It does not display the default value:

When i select something works as expected:

Translation works fine:

[skoff]

@george_eleutheriou when you translate, are you doing it on the fly (with a button in the app) or you change the default language and then reload the app?

And from what I tried for your default I was able to make this work if I set the value where I define the variable in the Class. If I try to set it in the constructor it doesn’t work.

[george_eleutheriou]

i have a button which calls this function on click:

this.translate.use('name_of_json_file');

so i can change the language as many times as i want without reloading the app.

Sorry i didn’t understand where do you set the value of the variable?

[skoff]

i’m doing it in my main app.ts in my menu there a button which a function that does the exact same thing you’re doing.

[almawhoob]

I am also facing the same issue. Were you able to solve it?

[skoff]

I’ve abandoned ionic… so many bugs and stability issues… cant do anything without getting stupid errors and bugs. That’s the problem of building a framework on top of another.