title: Using Angular Material mat-autocomplete without ReactiveForm
body: <p>I try to use <code>&lt;mat-autocomplete&gt;</code> from Angular Material (not AngularJS) without using a reactive form. But all their examples use reactive forms...</p>
  
  <p>What I try to do:<br>
  1. when something is typed in the <code>mat-input</code>, make an Ajax call to retrieve a list of users<br>
  2. Display the list of users in the autocomplete (display the user's name), but store the user as the model<br>
  3. When the model changes, call a function of my choice</p>
  
  <p>For now I do those crazy things (I say crazy because it seems to much).</p>
  
  <pre><code>&lt;mat-form-field fxLayout&gt;
    &lt;input type="text"
               matInput fxFlex="100"
               [(ngModel)]="listFilterValue"
               (keyup)="memberInputChanged(input.value)"
               (change)="memberChanged()"
               *ngIf="isAutocompleteNeeded()"
               #input
               [matAutocomplete]="auto"&gt;
  &lt;/mat-form-field&gt;
  
  &lt;mat-autocomplete #auto="matAutocomplete" [displayWith]="getMemberAsStr"&gt;
         &lt;mat-option *ngFor="let member of members | async" [value]="member"&gt;
            {{ getMemberAsStr(member) }}
         &lt;/mat-option&gt;
  &lt;/mat-autocomplete&gt;
  </code></pre>
  
  <p>For now, there are only <code>console.log</code> in my JS to see what's called, with what value so I don't share it here. Am I using the right attributes, the right logic ?</p>
  
  <p>(the <code>members</code> property in my component is a Rxjs BehaviourSubject)</p>
  
  <p>What I do for now does not work because <code>listFilterValue</code> is never set to anything.</p>