title: Angular AutoComplete is returning value as [Object Object]
body: <p>My requirement was to show the selected value in the Input Box and get the Selected Id and Value to the .ts file. As I need the Id and Value I am binding the option value directly to [value]. But if I do that it's getting printed as [Object Object].</p>
  
  <pre><code>&lt;mat-form-field appearance="outline" class="w-100"&gt;
              &lt;mat-label&gt;Enter Hotel Name&lt;/mat-label&gt;
              &lt;input type="text" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto"&gt;
              &lt;mat-autocomplete #auto="matAutocomplete" (optionSelected)="selectedclient($event)"&gt;
                  &lt;mat-option *ngFor="let option of clients; let i = index" [value]="option"&gt;
                      {{ option.name }}
                    &lt;/mat-option&gt;
              &lt;/mat-autocomplete&gt;
              &lt;mat-icon matSuffix&gt;location_on&lt;/mat-icon&gt;
            &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>Ts File</p>
  
  <pre><code>    options = [
          { id: 1, name: 'One'},
          { id: 2, name: 'Two'},
          { id: 3, name: 'Three'}
         ];
  
  selectedclient(event) {
       console.log(event.option.value);
     }
  </code></pre>
  
  <p>Stackblitz Editor URL:
  <a href="https://stackblitz.com/edit/angular-mat-select-data-n4tvmj" rel="noreferrer">https://stackblitz.com/edit/angular-mat-select-data-n4tvmj</a></p>