Angular Material autocomplete in version 15.4.9 is not working

Question

I am fairly new to Angular. I have a problem with the autocomplete feature of angular material. When I try to use it, I always get errors. I just copied the code from the documentation and also synchronized the versions. I also tested the auto complete in another project which uses a newer Angular material version and everything worked there.

The Error Messages I get:

'mat-autocomplete' is not a known element:
1. If 'mat-autocomplete' is an Angular component, then verify that it is part of this module.
2. If 'mat-autocomplete' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.ngtsc(-998001)
projects.component.ts(16, 13): Error occurs in the template of component ProjectsComponent.
No directive found with exportAs 'matAutocomplete'.ngtsc(-998003)
projects.component.ts(16, 13): Error occurs in the template of component ProjectsComponent.

projects.component.html

<div class="filter-project-section">
        <mat-form-field appearance="outline" style="flex:1" class="filter-form">
          <mat-label>Filter</mat-label>
          <input matInput [formControl]="searchControl">
          <mat-icon matSuffix>search</mat-icon>
        </mat-form-field>
       
        <mat-autocomplete #auto="matAutocomplete">
          <mat-option *ngFor="let option of options" [value]="option">
            {{option}}
          </mat-option>
        </mat-autocomplete>
 
      </div>

projects.component.ts

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { debounceTime, distinctUntilChanged, Observable, startWith, switchMap,map } from 'rxjs';
import { Project } from '../_entites/project';
import { ProjectDataService } from '../_services/project.service';
import { ProjectEditComponent } from '../project-edit/project-edit.component';
import { MatDialog } from '@angular/material/dialog';
import { ProjectCreateComponent } from '../project-create/project-create.component';
import {MatAutocompleteModule} from '@angular/material/autocomplete';
 
interface IDialogData {
  data: Project;
}
 
@Component({
  selector: 'app-projects',
  templateUrl: './projects.component.html',
  styleUrls: ['./projects.component.scss']
})
export class ProjectsComponent {
  projects$ : Observable<Project[]>;
  searchControl = new FormControl<string>('');
  filteredProjects$ = this.searchControl.valueChanges.pipe(
    startWith(''),
    distinctUntilChanged(),
    debounceTime(1000),
    switchMap(value => {
      if (value === '') {
        return this.projects$; // Return all translations if the search input is empty
      }
      return this.filter(value as string);
    })
  );
 
  constructor(private projectService:ProjectDataService, private dialog: MatDialog) {
    this.projects$ = this.projectService.load();
  }

   //more code
}

Answer 1

If projects component is standalone, add MatAutocompleteModule to the imports array.

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

...
@Component({
    standalone: true,
    imports: [
      ...
      MatAutocompleteModule,
      ...
    ],
    ...
})
export class ProjectsComponent {
    ...

If the component is not standalone, go to the place where you declared the component declarations array. Then import MatAutocompleteModule.

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

...
@NgModule({
    ...
    imports: [
      ...
      MatAutocompleteModule,
      ...
    ]
    ...
})
export class SomeModule {}