I'm currently using Angular 11 and I have noticed that when i'm changing the app lang (via a button), the mat-autocompletes selected value isn't translating, but all the available values of the autocompletes are correctly translating.
As you can see above, in one of those autocompletes, i have a list of "Type" class objects. Those objects have a property named "label_culture_aware" which is used to return the right property depending on which language we're on. (for instance if we're in French, the "label_fr" property is returned and if we're in English, the "label_en" is returned)
Here is my code:
html
<div class="col-12 col-md-3 space-between-col" formGroupName="autocomplete">
<mat-form-field [floatLabel]="floatLabel" [appearance]="appearance">
<mat-label>{{ 'committee.type' | translate }}</mat-label>
<input matInput
[matAutocomplete]="TypeAutoComplete"
formControlName='type'
/>
</mat-form-field>
<mat-autocomplete #TypeAutoComplete="matAutocomplete"
[displayWith]="displayTypeForAutocomplete"
>
<mat-option *ngIf="autocomplete.type.fetching" class="is-loading">
<mat-spinner diameter="50"></mat-spinner>
</mat-option>
<ng-container *ngIf="!autocomplete.type.fetching">
<mat-option *ngFor="let type of autocomplete.type.values" [value]="type">
<span>{{ type.label_culture_aware }}</span>
</mat-option>
</ng-container>
</mat-autocomplete>
</div>
Typescript
/**
* Display selected options in the Auto-Complete input
*/
displayTypeForAutocomplete(type: Type)
{
if (type)
{
return type.label_culture_aware;
}
}
// Type class
public get label_culture_aware(): string
{
return TranslateHelpersService.getLocalizedString ( this.label_fr,
this.label_en
);
}
I suppose that the problem is due to the [displayWith]
attribute which doesn't refactor once it's initialized, contrary to the {{ type.label_culture_aware }}
that is in my html template.
So my question is : Is there a way to update the [displayWith]
value when the lang is changed ?
Working Solution :
Putting this in ngOnInit()
works :
this.translate.onLangChange.subscribe ( (event: LangChangeEvent) => {
this.form.get('type').setValue(this.form.get('type').value, {emitEvent: false});
});
(Where this.translate is the Angular TranslateService that I've put in constructor signature)