title: Angular Materials autocomplete data loading but not filtering working perfectly angular 6
body: <p>This is my HTML code. form the example I took the code. <a href="https://stackblitz.com/angular/redxejmejyn?file=app%2Fautocomplete-filter-example.ts" rel="nofollow noreferrer">sample code</a>. But filtering when typing is not working</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mat-form-field appearance="outline"&gt;
    &lt;input type="text" formControlName="planClient" matInput placeholder="Plan Client" [matAutocomplete]="auto"&gt;
    &lt;mat-autocomplete #auto="matAutocomplete"&gt;
      &lt;mat-option *ngFor="let client of filteredOptions | async" [value]="client"&gt;
        {{client}}
      &lt;/mat-option&gt;
    &lt;/mat-autocomplete&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>This is my .ts file</p>
  
  <pre class="lang-js prettyprint-override"><code>filteredOptions: Observable&lt;string[]&gt;;
  clients: string[] = [
    'Alabama',
    'California',
    'Colorado',
    'Connecticut',
    'SelectHealth',
    'UMR'
  ];
  planClient = new FormControl();
  
  this.filteredOptions = this.planClient.valueChanges
    .pipe(
      startWith(''),
      map(value =&gt; this._filter(value))
    );
  
  public _filter(value: string): string[] {
    const filterValue = value.toLowerCase();
    return this.clients.filter(client =&gt; client.toLowerCase().includes(filterValue));
  }
  </code></pre>