How do you get ngx-translate work with angular material

May 28, 2022

I’m a novice at Angular and have an angular app 13.3.6 with angular material 13.3.6 and ngx-translate 14.0.0. I use mat-option to select my languages, however when I click them, they don’t change the website’s language.

My translationservice looks like this:

export class TranslatorService implements OnInit {

  constructor(public translate: TranslateService, private http: HttpClient) {
    translate.addLangs(['nl', 'fr', 'en']);
    translate.setDefaultLang('nl');
    const browserLang: any = translate.getBrowserLang();
    translate.use(browserLang.match(/nl|fr|en/) ? browserLang : 'nl');
  }

  // eslint-disable-next-line @angular-eslint/contextual-lifecycle
  ngOnInit(): void {
    this.translate.addLangs(['nl', 'fr', 'en']);
    this.translate.setDefaultLang('nl');

    const browserLang: any = this.translate.getBrowserLang();
    this.translate.use(browserLang.match(/nl|fr|en/) ? browserLang : 'nl');
  }
}

and my implementation in the component like this:

<mat-select class="lang-selector__dropdown" [(ngModel)]="translate.use">
  <mat-option *ngFor="let lang of translate.getLangs()" [value]="translate.use">{{ lang | uppercase }}</mat-option>
</mat-select>

>Solution :

First issue with your code is that you are setting the value of each option to a static function translate.use, that cannot work. Instead, you want to set the value to the language, so you can work with it when the option gets selected.

Second issue is, that you are setting the [(ngModel)] of the select to translate.use. I have no clue what this does, but it definitely doesn’t change the language. Instead, you can listen to the selectionChange event and call translate.use() in case it is fired.

Final code:

<mat-select class="lang-selector__dropdown (selectionChange)="translate.use($event.value)">
  <mat-option *ngFor="let lang of translate.getLangs()" [value]="lang">{{ lang | uppercase }}</mat-option>
</mat-select>