Change of language doesn't work instantly in ionic 3

Question

I'm using ionic cli 4.6.0 with @ngx-translate/core 9.1.1, and @ngx-translate/http-loader 2.0.1. The pages are lazy loaded while the ngx-translate is used as shared module, i.e.

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { IonicStorageModule } from '@ionic/storage';

import { MyApp } from './app.component';

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    BrowserModule, BrowserAnimationsModule,
    IonicModule.forRoot(MyApp),
    HttpClientModule,
    IonicStorageModule.forRoot(),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
      }
    })
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    Logger
  ]
})
export class AppModule {}

. In app.component.ts whenever I set the default value to whichever language the app on restart it works as expected, i.e. translate.setDefaultLang('en') shows language in english while translate.setDefaultLang('fr') in french.

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { TranslateService } from '@ngx-translate/core';
import { Storage } from '@ionic/storage';

import { Logger } from '../providers/logger';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = 'HomePage';

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen,
              translate:TranslateService,storage:Storage,logger:Logger) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
      // this language will be used as a fallback when a translation isn't found in the current language
       translate.setDefaultLang('en');
    });
  }
}

I have created a page settings in which I have a select box which on change sets the language to the new input, i.e. settings.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { TranslateService } from '@ngx-translate/core';

/**
 * Generated class for the SettingsPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-settings',
  templateUrl: 'settings.html',
})
export class SettingsPage {

  languages:any[] = [
    {value:"en",text:"English"},
    {value:"fr",text:"French"}
  ];

  selectedLanguage:string = "en";

  constructor(public navCtrl: NavController, public navParams: NavParams,private translate: TranslateService) {

  }

  onChangeLanguage(selectedLanguage:string){
   this.translate.use(selectedLanguage);
  }

}

and in settings.html

  <select [ngModel]="selectedLanguage" (ngModelChange)="onChangeLanguage($event)">
    <option [value]="language.value" *ngFor="let language of languages">{{language.text}}</option>
  </select>

What I would expect is when I use e.g. this.translate.use("fr") and I return to home page everything to be translated to french. It seems that it doesn't work like that.

How could I achieve something like that?

Answer 1

Just in case somebody needs it. I used the onLangChange which is an observable. The way I used it

import { NgModule, ElementRef, ViewChild } from '@angular/core';
import { trigger, state, style, animate,transition, query} from '@angular/animations';
import { Observable, Subscription } from 'rxjs/Rx';
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { IonicPage } from 'ionic-angular';
import { TranslateService,LangChangeEvent} from '@ngx-translate/core';


@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})
export class HomePage {

  private items:any=[];
  constructor(public navCtrl: NavController,private translate: TranslateService) {

  }

  ionViewDidLoad(){

    this.translate.onLangChange.subscribe((event: LangChangeEvent) => {


      this.items=[this.translate.instant("Word1"),this.translate.instant("Word2")];


    });
  }
}

So whenever the language is changed whereever the "items" property is used, it's rendered with the new language.