title: Is there a way to use a mat-autocomplete where the corresponding input is in its parent component?
body: <p>This works with a regular datalist element where the <code>list="target"</code> on the input element can find the <code>id="target"</code> in the child component. I am trying to figure out a way to do this with the material autocomplete component. </p>
  
  <p>Using a regular datalist element</p>
  
  <p>parent.component.html</p>
  
  <pre><code> &lt;input type="text" list="target"&gt;
   &lt;app-child&gt;&lt;/app-child&gt;
  </code></pre>
  
  <p>child.component.html</p>
  
  <pre><code>&lt;datalist id="target"&gt;
      &lt;option *ngFor="let option of options" [value]="option.name"&gt;&lt;/option&gt;
  &lt;/datalist&gt;
  </code></pre>
  
  <p>I have been trying to implement this feature all day I usually get one of two errors:</p>
  
  <pre><code>Error: Attempting to open an undefined instance of `mat-autocomplete`. Make sure that the id passed to the `matAutocomplete` is correct and that you're attempting to open it after the ngAfterContentInit hook.
  </code></pre>
  
  <p>or</p>
  
  <pre><code>Error: Export of name 'matAutocomplete' not found!
  </code></pre>
  
  <p>Using a Mat-Form-Field and a Mat-Autocomplete</p>
  
  <p>mat-parent.component.html</p>
  
  <pre><code>&lt;mat-form-field&gt;
      &lt;input type="text" matInput [matAutocomplete]="auto"&gt;
  &lt;/mat-form-field&gt;
  &lt;app-mat-child&gt;&lt;/app-mat-child&gt;
  </code></pre>
  
  <p>mat-child.component.html</p>
  
  <pre><code>&lt;mat-autocomplete #auto="matAutocomplete"&gt;
      &lt;mat-option *ngFor="let option of options" [value]="option.name"&lt;/option&gt;
  &lt;/mat-autocomplete&gt;
  </code></pre>