[Fixed] NGX-Translate not working with Angular Material mat-select?


I am using Angular 9.1
I have done this with NGX-translate to choose the language of the website:

<label class="mr-3"> {{'HEADER.CHOOSE' | translate}}
  <select #langselect (change)="translate.use(langselect.value)">
    <option *ngFor="let lang of translate.getLangs()" [value]="lang">{{ lang }}</option>

It Works.

But when I’m doing the same with Material, it displays fine but the translations are not functionning.

  <mat-label>{{'HEADER.CHOOSE' | translate}}</mat-label>
  <mat-select #langselect (change)="translate.use(langselect.value)">
    <mat-option *ngFor="let lang of translate.getLangs()" [value]="lang">
      {{ lang }}

This is my TS:

export class LangSelectorComponent {
  constructor(public translate: TranslateService) {

Is it a problem with my code or is there any problems of compatibity with Material and NGX?

Thank you.


<mat-select> has no (change) output. You can use (selectionChange) as an exact replacement in your existing code.

(Or you might want to consider using the ControlValueAccessor interface by adding [(ngModel)] or formControlName and bind the select directly to a setter in you component code.)

Here is a working StackBlitz sample:
(<- The material design is a bit off there for some reason, but the switching works)

Leave a Reply

(*) Required, Your email will not be published