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:

  


  
    {{ test }}
  

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)