title: How can you use MatAutocomplete on Ionic's 5 ion-input?
body: <p><a href="https://material.angular.io/components/autocomplete/api" rel="noreferrer">MatAutocomplete</a> seemingly can only be used on <code>input</code> and <code>textarea</code> elements. When you would build a custom <code>input</code> angular component with own style you could pass it through to the native <code>input</code> like described in <a href="https://stackoverflow.com/questions/58872590/use-matautocomplete-on-my-custom-input-component">Use [matAutocomplete] on my custom input component</a>.</p>
  
  <p>However, how can you use <a href="https://material.angular.io/components/autocomplete/api" rel="noreferrer">MatAutocomplete</a> on an existing <a href="https://ionicframework.com/docs/api/input" rel="noreferrer"><code>ion-input</code></a>?</p>
  
  <p>From what I see, when working with <a href="https://ionicframework.com/docs/api/input" rel="noreferrer"><code>ion-input</code></a>, there is no easy way to access the native <code>input</code> like the answer above for custom input elements would require. You can use <code>getInputElement()</code> of <a href="https://ionicframework.com/docs/api/input" rel="noreferrer"><code>ion-input</code></a> after initialization of the template but from the <a href="https://material.angular.io/components/autocomplete/api" rel="noreferrer">MatAutocomplete</a> documentation I don't see a way to initialize <code>mat-autocomplete</code> programmatically and then bind it to an <code>input</code> on the fly.</p>
  
  <p>Am I missing something or is there any other good way to use <a href="https://material.angular.io/components/autocomplete/api" rel="noreferrer">MatAutocomplete</a> with <a href="https://ionicframework.com/docs/api/input" rel="noreferrer"><code>ion-input</code></a>?</p>