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>
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 :)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With