Is there a way to use a mat-autocomplete where the corresponding input is in its parent component?

11,944

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 :)

Share:
11,944
nsquires
Author by

nsquires

I am a software developer that does software things.

Updated on June 04, 2022

Comments

  • nsquires
    nsquires almost 2 years

    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>