Angular material mat-select and mat-option translations

[elyas145]

I have a component which houses a mat-form-field, with a mat-select element. this element has mat-option tags with text that needs translation. <mat-option value="intranet_virt_absb_e"> {{"infozone_search.branch_abbr.absb" | translate: locale.language}}</mat-option>

where locale is @Inject(L10N_LOCALE) public locale: L10nLocale

The initial translation works fine, however, when I switch languages using the same method as the stackBlitz example, I get a ExpressionChangedAfterItHasBeenCheckedError. The previous and current values in the error pertain to the current selection in the mat-select field. if the option is selected, then the locale is set to fr via the language button, the error message would show previous value "null: ", current value: "null: ".

for some reason, Angular is doing the checking before the translation is finished. I tried this with the directive, as well as pipes. here is the full mat-select component. the rest of the application translates without error, and without looking at the console, the app behaves as expected (the selected value in the mat-select field is being translated back and forth).

`

infozone_search.within

<mat-select [(value)]="searchIndex" aria-label="Within:">
  <mat-option value="intranet_all_web_e">{{
    "infozone_search.all_infozone" | translate: locale.language
  }}</mat-option>
  <mat-optgroup l10n-label label="infozone_search.branches" l10nTranslate>
    <mat-option value="intranet_virt_absb_e">{{
      "infozone_search.branch_abbr.absb" | translate: locale.language
    }}</mat-option>
    <mat-option value="intranet_virt_tsd_e">{{
      "infozone_search.branch_abbr.ccsd" | translate: locale.language
    }}</mat-option>
    <mat-option value="intranet_virt_erm_e">{{
      "infozone_search.branch_abbr.aerb" | translate: locale.language
    }}</mat-option>
    <mat-option value="intranet_virt_appls_e">{{
      "infozone_search.branch_abbr.appeals" | translate: locale.language
    }}</mat-option>
    <mat-option value="intranet_virt_tsdmb_e">{{
      "infozone_search.branch_abbr.cvb" | translate: locale.language
    }}</mat-option>
    <mat-option value="intranet_virt_cnws_e">{{
      "infozone_search.branch_abbr.collections" | translate: locale.language
    }}</mat-option>
    <mat-option value="intranet_virt_cpb_e">{{
      "infozone_search.branch_abbr.cpb" | translate: locale.language
    }}</mat-option>
    <mat-option value="intranet_virt_fab_e">{{
      "infozone_search.branch_abbr.fab" | translate: locale.language
    }}</mat-option>
    <mat-option value="intranet_virt_hrbm_e">{{
      "infozone_search.branch_abbr.hrb" | translate: locale.language
    }}</mat-option>
    <mat-option value="intranet_virt_itb_e">{{
      "infozone_search.branch_abbr.itb" | translate: locale.language
    }}</mat-option>
    <mat-option value="intranet_virt_lprab_e">{{
      "infozone_search.branch_abbr.lprab" | translate: locale.language
    }}</mat-option>
    <mat-option value="intranet_virt_lsb_e">{{
      "infozone_search.branch_abbr.lsb" | translate: locale.language
    }}</mat-option>
    <mat-option value="intranet_virt_pab_e">{{
      "infozone_search.branch_abbr.pab" | translate: locale.language
    }}</mat-option>
    <mat-option value="intranet_virt_csbdb_e">{{
      "infozone_search.branch_abbr.siib" | translate: locale.language
    }}</mat-option>
    <mat-option value="intranet_virt_imrc_e">{{
      "infozone_search.branch_abbr.info_management"
        | translate: locale.language
    }}</mat-option>
  </mat-optgroup>
  <mat-optgroup l10n-label label="infozone_search.regions" l10nTranslate>
    <mat-option value="intranet_virt_atla_e">{{
      "infozone_search.region.atlantic" | translate: locale.language
    }}</mat-option>
    <mat-option value="intranet_virt_ontario_e">{{
      "infozone_search.region.ontario" | translate: locale.language
    }}</mat-option>
    <mat-option value="intranet_virt_pacz_e">{{
      "infozone_search.region.pacific" | translate: locale.language
    }}</mat-option>
    <mat-option value="intranet_virt_pra_e">{{
      "infozone_search.region.prairie" | translate: locale.language
    }}</mat-option>
    <mat-option value="intranet_virt_que_e">{{
      "infozone_search.region.quebec" | translate: locale.language
    }}</mat-option>
  </mat-optgroup>
</mat-select>

`

I also tried adding the l10nTranslate directive to both the mat-form-field tag, and the mat-select tag. none worked.

any feedback or comments appreciated. Thank you!

[robisim74]

Hi @elyas145,

I've never seen that error in matSelect, but it seems to have happened to others too: https://github.com/angular/components/issues/14793

[elyas145]

Thank you for the prompt response. I was able to solve the issue by having the surrounding component implement AfterViewChecked, and calling detectChanges() on ChangeDetectorRef.

Someone commented that their problem was solved by upgrading to Angular 10, this did not solve my problem. (Angular 10.0.8, Ivy enabled, Material 10.1.3)

[robisim74]

Closed due to inactivity