Angular material select don't show current ngx-translate language on the App start (before user pick a lang manually)

user_3211932 0
Viewed 2004

I'm using ngx-translate and it works fine. Following code (taken from official example) shows me current lang and allows me to switch it:

<select #langSelect (change)="translate.use(langSelect.value)">
    <option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="lang === translate.currentLang">{{ lang }}</option>
</select>

All ngx-translate infrastructure is taken from the doc and is going to be permanent. Then I want to use material select (mat-select) instead of native select:

<mat-select #langSelect (change)="translate.use(langSelect.value)">
  <mat-option 
    *ngFor="let lang of translate.getLangs()" 
    [value]="lang" 
    [selected]="lang === translate.currentLang"
  >
    {{ lang }}
  </mat-option>
</mat-select>

You see, nothing's really different. This code also would allow me to switch languages, but it won't show me current language before first change.

I created simple demo, its view is not perfect, but the issue can be reproduced easily: stackblitz. I wonder if I missed something, but I really stuck here trying to make material variant work and show me current lang before I open dropdown and pick a lang.

ngx-translate angular-material angular internationalization javascript
1 Answers

You can try this. You have to set [value]="translate.currentLang" in mat-select. Also you don't need selected in mat-option.

<mat-select [value]="translate.currentLang" class="lang" #langSelect (change)="translate.use(langSelect.value)">
    <mat-option 
    *ngFor="let lang of translate.getLangs()" 
    [value]="lang"
    >
       {{ lang }}
    </mat-option>
</mat-select>
user_28423240
Related