title: How do i bind input field (from DB to UI / UI to DB) with an autocomplete option in angular material?
body: <p>while using angular material table , i wanted to have an editable cell with an input field that has an autocomplete functionality. The datasource for the table is different from the source of the autocomplete option. I am able to make the autocomplete work but i couldn't make the two way binding work for the initial population from Database or after a user changes the values.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ng-container matColumnDef="outputProductCode"&gt;
        &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; Output Product Code&lt;/mat-header-cell&gt;
        
        &lt;td  mat-cell *matCellDef="let row; let i = index"&gt;
          &lt;mat-form-field &gt;
            &lt;input type="text" aria-label="ProductCode" matInput [(ngModel)]="row.outputProductCode" [matAutocomplete]="auto" [formControl]="myControl"&gt;
            &lt;mat-autocomplete #auto="matAutocomplete"  (optionSelected)="saveProductCode(row, $event.option.value)" &gt;
              &lt;mat-option *ngFor="let option of filteredOptions | async" [value]="option"&gt;
                {{option}}
              &lt;/mat-option&gt;
            &lt;/mat-autocomplete&gt;
          &lt;/mat-form-field&gt;
        &lt;/td&gt;
      &lt;/ng-container&gt;</code></pre>
  </div>
  </div>
  </p>