Multiple autocomplete in same page with different source in angular 4 with angular material

Question

Multiple autocomplete in same page with different source in angular 4 with angular material:

source :https://material.angular.io/components/autocomplete/examples

Answer 1

You have the same reference variable (#auto) assigned to both inputs. The id needs to be unique for each input. Change your second input and md-autocomplete to following:

<md-input-container>
  <input mdInput placeholder="Test" [mdAutocomplete]="autoTest" [formControl]="testCtrl">
</md-input-container>
<md-autocomplete #autoTest="mdAutocomplete">
  <md-option *ngFor="let test of filteredTests | async" [value]="test">
    {{ test }}
  </md-option>
</md-autocomplete>

Link to Plunker Demo

---

For cycles like *ngFor there is no need to create dynamically named template variable, since

Template reference variables are scoped to the template they are defined in. A structural directive creates a nested template and, therefore, introduces a separate scope. (This question)