Angular mat-autocomplete : How to display the option name and not the value in the input

Question

I'm using the mat-autocomplete widget under my Angular app :

    <mat-form-field class="col-md-3" color="warn">
                <input type="text"
                       id="libelleShop"
                       #inputSelectShop
                       placeholder="Selectionner la boutique"
                       matInput
                       formControlName="libelleShop"
                       ngDefaultControl
                       [matAutocomplete]="auto">
                <mat-autocomplete #auto="matAutocomplete"" 
               (optionSelected)="onShopSelectionChanged($event)">
                  <mat-option *ngFor="let shop of shopData" [value]="shop.value">
                    {{shop.name}}
                  </mat-option>
                </mat-autocomplete>
   </mat-form-field>

my Shop data is like this :

shopData = [
    {name: 'AAA' , value :'11'},
    {name: 'BBB', value :'22'},
    {name: 'CCC', value : '33'}
  ];

Like this - options are displayed by name , but when selection the input displaysit by the value not the name.

Knowing that i need the value for other treatment and i won't change the [value] in the mat-automplete.

How may i take reference for the name to the input ??

Suggestions ??

Solution 1

You can use the displayWith attribute of Mat autocomplete and pass in a function that will return the desired formatted string.

In your example:

displayFn(shop: Shop): string {
  return shop.name;
}

<mat-autocomplete #auto="matAutocomplete"" (optionSelected)="onShopSelectionChanged($event)" [displayWith]="displayFn">
    <mat-option *ngFor="let shop of shopData" [value]="shop">
      {{shop.name}}
    </mat-option>
  </mat-autocomplete>

Solution 2

Simple way by using option id mayby useful:

<mat-autocomplete #auto="matAutocomplete" (optionSelected)="onShopSelectionChanged($event)">
  <mat-option *ngFor="let shop of shopData" [value]="shop.name" [id]="shop.value">
    {{shop.name}}
  </mat-option>
</mat-autocomplete>

and read value & name in the function:

onShopSelectionChanged(event) {
    const selectedValue = event.option.id;
    console.log(selectedValue);
    const selectedName = event.option.value;
    console.log(selectedName);
}

Solution 3

Because you don't want to change [value]="shop.value", your only resort is to lookup the name based on value in a function used with the displayWith feature:

<mat-autocomplete ... [displayWith]="getShopName" ... >


getShopName(value) {
    const results = this.shopData.filter(shop => shop.value === value);
    if (results.length) {
        return results[0].name;
    }
    return value;
}

Comments

[G. Tranter]

This won't work because of [value]="shop.value" which the OP doesn't want to change. Also, displayWith is a feature on mat-autocomplete, not mat-option.

[Alex]

Indeed my mistake, said it in the answer but not in the code... Anyway the lookup is the right solution in that case :)

[Gaalvarez]

this useful for me, only fix => [value]="shop"

[sandyiit]

This works fine except when names are duplicated although the Ids are unique

[ZAJ]

I used this method for some reason the name is not getting displayed when I select a name but in the console it prints the value property. Can someone please help!!

[Alex]

Are you passing [value]="shop" instead of [value]="shop.value" ?

[Harshad Vekariya]

You saved me. Thanks