I'm currently attempting to implement a custom filter for an autocomplete input text following the Angular Material guide.
https://material.angular.io/components/autocomplete/overview
Here's what I have so far:
TS
import { Component, OnInit } from '@angular/core';
import { TemplateRef } from '@angular/core';
import { FormControl } from "@angular/forms";
import { Observable } from "rxjs";
import { map, startWith, filter } from 'rxjs/operators';
(...)
export class AppComponent implements OnInit {
title = 'Your Profile';
displayedColumns: string[] = ['selected', 'name', 'description', 'pnr'];
dataSource = ELEMENT_DATA;
myControl = new FormControl();
options: any[] = ['One', 'Two', 'Three'];
filteredOptions: Observable<string[]>;
ngOnInit() {
this.filteredOptions = this.myControl.valueChanges
.pipe(
startWith(''),
map(value => this._filter(value))
);
}
private _filter(value: any): string[] {
const filterValue = value.toLowerCase();
return this.options.filter(option => option.toLowerCase().includes(filterValue));
}
}
HTML
<mat-form-field class="full-with-field" hintLabel="(or code)">
<input matInput placeholder="RP oficina/Nombre empresa" [formControl]="companyControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
However, during testing, I encountered an error in the return statement. The specific error message received is:
[ts] Property 'filter' does not exist on type '{}'.
The 'options' variable is clearly part of an array, so it's puzzling why this error is occurring.
Further debugging in Firefox revealed the following error message:
Uncaught Error: Template parse errors:
Can't bind to 'formControl' since it isn't a known property of 'input'. ("="(or code)"> <input
matInput placeholder="RP oficina/Nombre empresa"
[ERROR ->][formControl]="companyControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocompl"): ng:///AppModule/AppComponent.html@26:7
... (Error details truncated)