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

Issue

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>
  </select>
</label>

It Works.

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

<mat-form-field>
  <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 }}
    </mat-option>
  </mat-select>
</mat-form-field>

This is my TS:

export class LangSelectorComponent {
  constructor(public translate: TranslateService) {
    translate.setDefaultLang('english');
    translate.use('english');
    translate.addLangs(['english','francais']);
  }
}

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

Thank you.

Solution

<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:
https://stackblitz.com/edit/angular-ivy-reoyvd?file=src%2Fapp%2Fapp.component.html
(<- The material design is a bit off there for some reason, but the switching works)