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 ??

Alex · Answer 1 · 2021-09-15T19:57:31.423

17

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>

edited Sep 15 '21 at 19:57

answered Mar 26 '19 at 11:27

Alex

1,090
7
21

5

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. – G. Tranter Mar 26 '19 at 20:13
Indeed my mistake, said it in the answer but not in the code... Anyway the lookup is the right solution in that case :) – Alex Mar 26 '19 at 23:20
this useful for me, only fix => [value]="shop" – Gaalvarez Dec 03 '19 at 20:46
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!! – ZAJ Sep 06 '21 at 07:12
Are you passing [value]="shop" instead of [value]="shop.value" ? – Alex Sep 15 '21 at 20:01
You saved me. Thanks – Harshad Vekariya Feb 01 '22 at 10:01

score 11 · Answer 2 · answered Aug 05 '19 at 08:08

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);
}

Very helpful when we want to process another value rather than a displayed value. — Prasanna, Dec 02 '22 at 18:49

score 2 · Answer 3 · answered Mar 26 '19 at 20:21

2

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;
}

answered Mar 26 '19 at 20:21

G. Tranter

16,766
1
48
68

This works fine except when names are duplicated although the Ids are unique – sandyiit Nov 07 '20 at 21:07

Abhishek Kumar · Answer 4 · 2019-03-26T11:42:53.783

You can use FormControl on input tag and can change the value of this form-control using patchValue method.

Use (onSelectionChange)="onEnter($event)" and find the selectedArray option using the selected value, and from that selected option object update the value of input with any of the options key.

Html :

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input #stateInput (keyup)="0" matInput placeholder="State" 
     aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option (onSelectionChange)="stateInput.value !=undefined && 
      onEnter($event)" *ngFor="let state of filteredStates | async"
      [value]="state.name">
        <img style="vertical-align:middle;" aria-hidden 
         src="{{state.flag}}" height="25" />
        <span>{{ state.name }}</span> |
        <small>Population: {{state.population}}</small>
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>

Ts file :

 onEnter(evt: any){
    const selectedState =  this.states.find(state =>
      state.name.toLowerCase()==evt.source.value.toLowerCase());
    if (evt.source.selected) {
      console.log(selectedState);
      if(selectedState) {
      setTimeout(()=>{
        this.stateCtrl.patchValue(selectedState.population);
      }, 0);
      }
    }
  }

Stackblitz Demo with other data

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

4 Answers4

Linked