I need to add an auto-complete feature in my Angular 6 app where the data is displayed as objects in a dropdown and filtered as we type.
**template.html**
<mat-form-field >
<input matInput [matAutocomplete]="auto" [formControl]="customerFilterControl">
<mat-autocomplete #auto="matAutocomplete" [displayWith] = "displayFn">
<mat-option *ngFor="let option of (filteredOptions | async)" [value] ="option">
{{option.name}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
Typescript
import { Observable } from 'rxjs';
import { FormControl } from '@angular/forms';
import { map, startWith } from 'rxjs/operators';
export class Component1 implements OnInit {
objectOptions = [
{ name:'Angular' },
{ name:'Angular Material' },
{ name:'React' },
{ name: 'vue' }
];
customerFilterControl = new FormControl();
ngOnInit() {
this.filteredOptions = this.customerFilterControl.valueChanges.pipe(
startWith(''),
map(value => this._filter(value))
);
}
_filter(value:string):string[] {
const filterValue = value.toLowerCase();
return this.objectOptions.filter(option => option.name.toLowerCase().includes(filterValue)); // how do I filter values here
}
displayFn(subject) {
return subject ? subject.name : undefined;
}
Note : I have imported following modules in app.module.ts MatSelectModule, MatAutocompleteModule, MatFormFieldModule, MatInputModule
It gives me error when I try to filter object by name property