Core: Using mat-select to change language doesnt work correctly

Created on 25 Sep 2018  路  1Comment  路  Source: ngx-translate/core

Current behavior


I'm using Angular material component and ngx-translate.
On a same page using natif select work correctly, but when you tried to use mat-select it doesn't work.
if you have on the same page 1 natif select and 1 mat-select, switch the language with the mat-select will update the natif select value, but text stay at the original lang.

## Expected behavior
Change the Language of the text

How do you think that we should fix this?

Minimal reproduction of the problem with instructions

Bellow the html code, only 2 select (1 natif and 1 with Angular material)

<div>
      <h2>{{ 'HOME.TITLE' | translate }}</h2>
</div>

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

<br>

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

and the TS

```
export class myComponent {
constructor(
public translate: TranslateService) {
translate.addLangs(['fr', 'en']);

    let browserLang = translate.getBrowserLang();
    translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
}

ngOnInit() {
}

public switchLanguage(lang: string) {
    console.log('UPDATE');
    this.translate.use(lang);
}

}
```
method switchLanguage is correcty called.
When you select on option with the mat-select, natif select is correctly but the text is not translate.
When you select on option with the natif select, mat-select is correctly and the text is translate.

Environment



    "@ngx-translate/core": "^10.0.2",

    "@angular/material": "^6.3.2",

    "@angular/animations": "^6.0.3",

    "@angular/cdk": "^6.3.2",



Browser:



    

  • [x] Chrome (desktop) version XX
    • 

  • [ ] Chrome (Android) version XX
    • 

  • [ ] Chrome (iOS) version XX
    • 

  • [ ] Firefox version XX
    • 

  • [x] Safari (desktop) version XX
    • 

  • [ ] Safari (iOS) version XX
    • 

  • [ ] IE version XX
    • 

  • [ ] Edge version XX
    • 




Others:

Mac OSX Mojave
picture KevinJue
👍7

Most helpful comment

+1

picture jagpreetsingh83 on 6 Nov 2018
👍3

>All comments

+1

jagpreetsingh83 picture jagpreetsingh83 on 6 Nov 2018
👍3
Was this page helpful?
0 / 5 - 0 ratings

Related issues

alkemist picture alkemist  路  3Comments
dankerk picture dankerk  路  3Comments
jellene4eva picture jellene4eva  路  3Comments
webprofusion-chrisc picture webprofusion-chrisc  路  4Comments
crebuh picture crebuh  路  3Comments