javascriptangularmat-autocomplete

MatAutoComplete - Update property displayed in displayWith when lang is changed


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.

enter image description here

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 ?


Solution

  • 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)