Angular datePicker ngx-translate

Question

I have an angular application that uses ngx-translate. I want to configure the language of my calendar according to the current language. So I did this:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    AppRoutingModule,
    NgbModule,
    BrowserModule,
    CoreModule,
    SharedModule,
    BrowserAnimationsModule,
    AngularSvgIconModule.forRoot(),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useClass: FileTranslationService,
        deps: [HttpClient]
      }
    })
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: HttpInterceptorService,
      multi: true
    },
    {
      provide: MAT_DATE_LOCALE,
      useValue: 'ja-JP'
    },
    {
      provide: DateAdapter,
      useClass: MomentDateAdapter,
      deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
    },
    {
      provide: MAT_DATE_FORMATS,
      useValue: MAT_MOMENT_DATE_FORMATS
    }

  ],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(translate: TranslateService, private _adapter: DateAdapter<any>){
    translate.addLangs(['fr']);
    translate.setDefaultLang('fr');

    const browserLang = translate.getBrowserLang();
    translate.use(browserLang.match(/fr/) ? browserLang : 'fr');

    this._adapter.setLocale(translate.currentLang);
    console.log(this._adapter);
  }
}

My problem is that my calendar always stays in Japanese. So for example my browser language is French. For example the module in which I have to use the calendar is lazy-loading

Answer 1

MAT_DATE_LOCALE should never be provided with a specific language when you want MAT_DATE_LOCALE to be dynamic.

You might want to make few slight changes to your code:

@NgModule({
  imports: [
     MatDatepickerModule,
     /** Note!! MatNativeDateModule must be imported in root module and only there! 
     *  do not import it in shared modules!
     */
     MatNativeDateModule
  ],
  providers: [
    /**
     *  Don't proivde MAT_DATE_LOCALE token 
     *  Once provided MAT_DATE_LOCALE with a specific lanugage, it cannot be changed
     * 
     *   // {
     *   //   provide: MAT_DATE_LOCALE,
     *   //   useValue: 'ja-JP'
     *   // },
     * 
     * Exclude the following providers (as they aren't needed in your case):
     * DateAdapter will be provided by MatNativeDateModule
     * 
     *   // {
     *   //   provide: DateAdapter,
     *   //   useClass: MomentDateAdapter,
     *   //   deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
     *   // },
     *   // {
     *   //   provide: MAT_DATE_FORMATS,
     *   //   useValue: MAT_MOMENT_DATE_FORMATS
     *   // }
     */
 ],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(
    private translate: TranslateService,
    private adapter: DateAdapter<Date>
  ) {
    this.translate.use(this.translate.getBrowserLang());

    this.translate.onLangChange
      .subscribe(({ lang }: LangChangeEvent) => this.adapter.setLocale(lang))
  }
}

Having made the changes above, try the following in your component (clicking switch should switch between English and Japanese)

 public en: boolean = false;
 constructor(private _adapter: DateAdapter<Date>}

 public switch() {
   this.en = !!!this.en
   this._adapter.setLocale(this.en ? "en-US" : "ja-JP")
 }

Answer 2

I did it like this but then it stays in English:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    AppRoutingModule,
    NgbModule,
    BrowserModule,
    CoreModule,
    SharedModule,
    BrowserAnimationsModule,
    AngularSvgIconModule.forRoot(),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useClass: FileTranslationService,
        deps: [HttpClient]
      }
    }),
    MatNativeDateModule
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: HttpInterceptorService,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(translate: TranslateService, private _adapter: DateAdapter<any>){
    translate.addLangs(['fr']);
    translate.setDefaultLang('fr');

    const browserLang = translate.getBrowserLang();
    translate.use(browserLang.match(/fr/) ? browserLang : 'fr');

    this._adapter.setLocale(translate.currentLang);
    console.log(this._adapter);
  }
}