Using angular material autocomplete feature has been a bit challenging for me. Whenever I try to focus, I encounter the error: Cannot read property 'createEmbeddedView' of undefined
Additionally, an error pops up for every letter I input: ERROR TypeError: this.autocomplete._setVisibility is not a function. Could someone please help me understand what's going wrong with my code? I am still new to Angular.
This is the structure in my html:
<mat-form-field>
<input formControlName="accId" matAutocomplete="auto" matInput>
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let accId of filteredOptions"> {{accId}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
In my .ts file:
filteredOptions: Observable<string[]>;
ngOnInit(): void {
this.filteredOptions = this.form.controls['accId'].valueChanges.pipe(startWith(''),map(val => this.filter(val)));
console.log(this.filteredOptions);
}
filter(val: string): string[] {
console.log("Inside filter...");
return this.details.listOfAccIds.filter(option =>option.toLowerCase().includes(val.toLowerCase()));
}
Note: The structure of this.details is as follows:
Detail {listOfAccIds: Array(3), listOfCodes: Array(2), listOfReasons: Array(3)}
listOfAccIds:(3) ["altaccId", "altaccIdss2", "altiid33"]
listOfCodes:(2) ["code1", "code2"]
listOfReasons:(3) ["reason1", "reason2", "reason3"]