ngFor and ng2-translate issue

Ionic Framework ionic-v3
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