Angular Material autocomplete shows TypeError: Cannot read property 'createEmbeddedView' of undefined

Question

I am trying to use angular material autocomplete feature. But when i keep my focus i start getting error: Cannot read property 'createEmbeddedView' of undefined

I also get another error for every letter i enter ERROR TypeError: this.autocomplete._setVisibility is not a function Can someone pls explain what is wrong with my code? I am a beginner in angular.

On my html I have:

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

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: I am getting this.details as

Detail {listOfAccIds: Array(3), listOfCodes: Array(2), listOfReasons: Array(3)}
  listOfAccIds:(3) ["altaccId", "altaccIdss2", "altiid33"]
  listOfCodes:(2) ["code1", "code2"]
  listOfReasons:(3) ["reason1", "reason2", "reason3"]

Answer 1

You are missing the brackets around matAutocomplete directive:

<input formControlName="accId" matAutocomplete="auto" matInput>

should be

<input formControlName="accId" [matAutocomplete]="auto" matInput>

The brackets are needed, because you want to pass the reference to the variable auto. The way you wrote it passes just a static string to the directive, which doesn't work, because the directive needs an element reference and not just its name.