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