title: Angular 2 material autocomplete selected value
body: <p>I have autocomplete input</p>
  
  <pre><code>&lt;div formArrayName="addresses"&gt; 
    &lt;div class="row" 
         *ngFor="let itemrow of searchForm.controls.addresses.controls; let i=index" 
         [formGroupName]="i"&gt;
      &lt;mat-form-field&gt;
        &lt;input type="text" 
               class="form-control" id="address"
               formControlName="address" 
               matInput 
               [matAutocomplete]="auto"
               (keyup)="getESRI($event.target.value)"
               (focusout)="bindLocation($event.target.value)"&gt;
        &lt;mat-autocomplete #auto="matAutocomplete"&gt;
          &lt;mat-option *ngFor="let option of testLocation"
                      [value]="option.text"&gt;
             {{ option.text }}
          &lt;/mat-option&gt;
        &lt;/mat-autocomplete&gt;
      &lt;/mat-form-field&gt; 
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><code>"testlocation":[{"text":"Euronet","magicKey":"dHA9MSNubT1FdXJvbmV0I2NzPTE5OjExI3NjPURFVQ==","isCollection":true},{"text":"Euronet","magicKey":"dHA9MSNubT1FdXJvbmV0I2NzPTE5OjExI3NjPURFVQ==","isCollection":true}]</code></p>
  
  <p>When I'm trying add value <code>[value]="option.magicKey</code> it shows in the input <code>option.magicKey</code> when I select option. I need <code>option.magicKey</code> only as the value, and <code>option.text</code> as the input option. Otherwise how to add <code>option.magicKey</code> as parameter to <code>bindLocation($event.target.value)</code> function?</p>