5

This works with a regular datalist element where the list="target" on the input element can find the id="target" in the child component. I am trying to figure out a way to do this with the material autocomplete component.

Using a regular datalist element

parent.component.html

 <input type="text" list="target">
 <app-child></app-child>

child.component.html

<datalist id="target">
    <option *ngFor="let option of options" [value]="option.name"></option>
</datalist>

I have been trying to implement this feature all day I usually get one of two errors:

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.

or

Error: Export of name 'matAutocomplete' not found!

Using a Mat-Form-Field and a Mat-Autocomplete

mat-parent.component.html

<mat-form-field>
    <input type="text" matInput [matAutocomplete]="auto">
</mat-form-field>
<app-mat-child></app-mat-child>

mat-child.component.html

<mat-autocomplete #auto="matAutocomplete">
    <mat-option *ngFor="let option of options" [value]="option.name"</option>
</mat-autocomplete>
ccpizza
  • 28,968
  • 18
  • 162
  • 169
nsquires
  • 899
  • 2
  • 8
  • 20

1 Answers1

10

I landed here because I was looking for the "Error: Export of name 'matAutocomplete' not found!" string. I fixed it in my project by importing the MatAutocompleteModule. So in the module.ts of your component you'll want to add the following:

import { MatAutocompleteModule } from '@angular/material/autocomplete';

(then scroll down to your imports array)

imports: [
  MatAutocompleteModule
]

Concerning the main question, I'm kind of new to Angular myself but afaik if you want to pass your text from the parent to the children you'll need to use an 'Input'.

I'd recommend you to read the corresponding part of the documentation, I can't explain it any better than that: https://angular.io/guide/template-syntax#how-to-use-input

I hope it helps :)

PLB
  • 881
  • 7
  • 20