ngFor and ng2-translate issue

Ionic Framework ionic-v3
1

I have ng2-translate installed and working except for this case…

<ion-item>
<ion-label>
  {{ 'SETTINGS.SELECT_LANGUAGE' | translate }}
</ion-label>
<ion-select [(ngModel)]=language (ionChange)="translate.use(language)">
  <ion-option *ngFor="let lang of langs" [value]="lang.value" [selected]="lang.value === translate.currentLang">{{ lang.name | translate }}</ion-option>
</ion-select>

The ‘SETTINGS.SELECT_LANGUAGE’ translates just fine but the list in the ngFor isn’t working as expected.

Variables in the controller:

language: string = "en"
  langs = [
    {name:"SETTINGS.ENGLISH",value:"en"},
    {name:"SETTINGS.SPANISH",value:"es"}
  ]

When you load the page, the value for the select is shown as “SETTINGS.ENGLISH” instead of “English”

If I have Spanish selected and select “Inglés” - the value is shown as “Inglés” instead of “English”.

Did some research and sounded like the issues was that the pipe needed to be impure - but the code already has pure:false in the plugin.

Do I fix this programmatically in the controller with a function? Seems like there should be a better solution.

2

could it be related to this issue https://github.com/driftyco/ionic/issues/8561

3

Yes, same thing still present in 2.0.0 - hopefully they’ll get to it soon

4

I do the following, hopefully it can be of help

HTML

<ion-select [(ngModel)]="form.language" multiple="false" cancelText="{{'general.select.cancel' | translate}}" okText="{{'general.select.ok' | translate}}">
	<ion-option *ngFor="let option of languages; let i = index" value="{{option.value}}">{{option.label}}</ion-option>
</ion-select>

In the component

this.languages = translate.instant("path.to.languages");

In the language file

"language": {
	"label": "Language",
	"languages": [
		{
			"label": "English",
			"value": "en"
		},
		{
			"label": "Deutsch",
			"value": "de"
		}
	]
}
5

I have not been able to make this work.

I have a languages.json file with this:

"languages": [
	{
		"name": "English",
		"value": "en"
	},
	{
		"name": "Spanish",
		"value": "es"
	}
]

then I have this in my settings.ts file

  language: string = "en"
  languages: any[]

  constructor(public navCtrl: NavController, public navParams: NavParams,translate:TranslateService,) {
    this.languages = translate.instant("languages")
  }

the translate.insant function isn’t firing - think it has to do with timing. If I put a button trigger on it, then it works, but when it is fired when everything is instantiated, it returns jus the value in the “”. (I have tried ./assets/i18n/laguanges with and without the .json)

What am I missing here?

6

Make sure that the following is run before calling translate.instant

translate.setDefaultLang('en');
translate.use('en');

Maybe even switch to the asynchronous way, if that helps

translate.get("languages").subscribe(
	data => {
		this.languages = data;
	}
);

If that for whatever reason STILL doesn’t work, you can try this

translate.onLangChange.subscribe(
	// Synchronous or asynchronous should both work here
);
7

Got it to work - for anybody who stumbles across this thread this is what I did

in app.component.ts:

translate.setDefaultLang('en')
translate.use('en')
platform.ready().then(() => {
  ...
})

In my controller:

  language: string = "en"
  languages: string[]

  constructor(public navCtrl: NavController, public navParams: NavParams,public userProvider:UserProvider,public translate:TranslateService,public appConfig:AppConfig) {}

ngOnInit() {
  this.translate.onLangChange.subscribe(data => {
    this.translate.get('LANGUAGES').subscribe((res: string[]) => {
      this.languages = res
    })
  })
}

in my en.json file:

{
  "LANGUAGES": [
		{
			"NAME": "English",
			"VALUE": "en"
		},
		{
			"NAME": "Spanish",
			"VALUE": "es"
		}
  ],
  "HOME": {
    "SETTINGS": "Settings",
.
.
.

in my es.json file:

{
  "LANGUAGES": [
		{
			"NAME": "Inglés",
			"VALUE": "en"
		},
		{
			"NAME": "Español",
			"VALUE": "es"
		}
  ],
  "HOME": {
    "SETTINGS": "Ajustes",
.
.
.

finally in my html

        <ion-item>
          <ion-label>
            {{ 'SETTINGS.SELECT_LANGUAGE' | translate }}
          </ion-label>
          <ion-select [(ngModel)]=language (ionChange)="translate.use(language)">
            <ion-option *ngFor="let lang of languages" [value]="lang.VALUE" [selected]="lang.VALUE === translate.currentLang">{{lang.NAME}}</ion-option>
          </ion-select>
        </ion-item>

Hope this helps somebody out

2 Likes
8

Had to modify the ngOnInit function to get called on first page load and on subsequent changes of the language. Here’s the new code:

ngOnInit() {
      this.translate.get('LANGUAGES').subscribe((res: string[]) => {
        this.languages = res
      })

  this.translate.onLangChange.subscribe(data => {
    this.translate.get('LANGUAGES').subscribe((res: string[]) => {
      this.languages = res
    })
  })
}
9

This works for me use ionViewWillEnter in the component.

Then set the default value in there.

Example :

ionViewWillEnter(){
this.global_roletype = ‘administrator’;
}