title: Angular mat chips with auto complete not working
body: <p>i want to implement the matAutoComplete in my angular project
  i gone through some references<br>
  <a href="https://stackblitz.com/edit/mat-chips-angularmaterial?file=package.json" rel="nofollow noreferrer">https://stackblitz.com/edit/mat-chips-angularmaterial?file=package.json</a> </p>
  
  <p>but i didn't get any options for autoComplete.</p>
  
  <p>//component.html</p>
  
  <pre><code>&lt;mat-form-field class="example-chip-list"&gt;
    &lt;mat-chip-list #chipList&gt;
      &lt;mat-chip
        *ngFor="let fruit of fruits"
        [selectable]="selectable"
        [removable]="removable"
        (removed)="remove(fruit)"&gt;
        {{fruit}}
        &lt;mat-icon matChipRemove *ngIf="removable"&gt;cancel&lt;/mat-icon&gt;
      &lt;/mat-chip&gt;
      &lt;input
        placeholder="New fruit..."
        #fruitInput
        [formControl]="fruitCtrl"
        [matAutocomplete]="auto"
        [matChipInputFor]="chipList"
        [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
        [matChipInputAddOnBlur]="addOnBlur"
        (matChipInputTokenEnd)="add($event)"&gt;
    &lt;/mat-chip-list&gt;
    &lt;mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)"&gt;
      &lt;mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit"&gt;
        {{fruit}}
      &lt;/mat-option&gt;
    &lt;/mat-autocomplete&gt;
  &lt;/mat-form-field&gt;
  
  
  &lt;pre&gt;{{fruits|json}}&lt;/pre&gt;
  </code></pre>
  
  <p>//component.ts</p>
  
  <pre><code>export class ChipsOverviewExample {
  visible = true;
    selectable = true;
    removable = true;
    addOnBlur = false;
    separatorKeysCodes: number[] = [ENTER, COMMA];
    fruitCtrl = new FormControl();
    filteredFruits: Observable&lt;string[]&gt;;
    fruits: string[] = [];
    allFruits: any= ['hi','hello','apple'];
  
    @ViewChild('fruitInput') fruitInput: ElementRef;
  
    constructor() {
      this.filteredFruits = this.fruitCtrl.valueChanges.pipe(
          startWith(null),
          map((fruit: string | null) =&gt; fruit ? this._filter(fruit) : this.allFruits.slice()));
          console.log(this.filteredFruits)
    }
  
    add(event: MatChipInputEvent): void {
      const input = event.input;
      const value = event.value;
  
      // Add our fruit
      if ((value || '').trim()) {
        this.fruits.push(value.trim());
      }
  
      // Reset the input value
      if (input) {
        input.value = '';
      }
  
      this.fruitCtrl.setValue(null);
    }
  
    remove(fruit: string): void {
      const index = this.fruits.indexOf(fruit);
  
      if (index &gt;= 0) {
        this.fruits.splice(index, 1);
      }
    }
  
    selected(event: MatAutocompleteSelectedEvent): void {
      this.fruits.push(event.option.viewValue);
      this.fruitInput.nativeElement.value = '';
      this.fruitCtrl.setValue(null);
    }
  
    private _filter(value: string): string[] {        
      const filterValue = value.toLowerCase();
  
      return this.allFruits.filter(fruit =&gt; fruit.toLowerCase().indexOf(filterValue) === 0);
    }
  }
  </code></pre>
  
  <p>even i already imported the MatAutocompleteModule package in app.module.ts</p>