title: Angular mat-autocomplete : How to display the option name and not the value in the input
body: <p>I'm using the <strong><code>mat-autocomplete</code></strong> widget under my Angular app :</p>
  
  <pre><code>    &lt;mat-form-field class="col-md-3" color="warn"&gt;
                  &lt;input type="text"
                         id="libelleShop"
                         #inputSelectShop
                         placeholder="Selectionner la boutique"
                         matInput
                         formControlName="libelleShop"
                         ngDefaultControl
                         [matAutocomplete]="auto"&gt;
                  &lt;mat-autocomplete #auto="matAutocomplete"" 
                 (optionSelected)="onShopSelectionChanged($event)"&gt;
                    &lt;mat-option *ngFor="let shop of shopData" [value]="shop.value"&gt;
                      {{shop.name}}
                    &lt;/mat-option&gt;
                  &lt;/mat-autocomplete&gt;
     &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>my Shop data is like this : </p>
  
  <pre><code>shopData = [
      {name: 'AAA' , value :'11'},
      {name: 'BBB', value :'22'},
      {name: 'CCC', value : '33'}
    ];
  </code></pre>
  
  <p>Like this -  options are displayed by <code>name</code> , but when selection the input displaysit by the <code>value</code> not the <code>name</code>.</p>
  
  <p>Knowing that i need the value for other treatment and i won't change the <code>[value]</code> in the <code>mat-automplete</code>.</p>
  
  <p>How may i take reference for the name to the input ??</p>
  
  <p>Suggestions ??</p>