filtro mat-autocomplete para resaltar coincidencias de cadenas parciales
Estoy tratando de lograr un filtro conmat-autocomplete
eso es similar al siguiente ejemplo;
Por lo tanto, estoy tratando de lograr la funcionalidad para que cuando un usuario comience a escribir en el comercio, busque filtros basados en una coincidencia de cadena parcial en cualquier lugar de la cadena y resalte esto en la opción.
Actualmente tengo en mi .html
<mat-form-field class="form-group special-input">
<input type="text" placeholder="Select a trade" aria-label="Select a trade" matInput [formControl]="categoriesCtrl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete" md-menu-class="autocomplete">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option.name">
{{ option.name }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
donde está mi .ts
categoriesCtrl: FormControl;
filteredOptions: Observable<ICategory[]>;
options: ICategory[];
categorySubscription: Subscription;
constructor(fb: FormBuilder, private router: Router, private service: SearchService, private http: Http) {
this.categoriesCtrl = new FormControl();
}
ngOnInit() {
this.categorySubscription = this.service.getCategories().subscribe((categories: ICategory[]) => {
this.options = categories;
this.filteredOptions = this.categoriesCtrl.valueChanges
.pipe(
startWith(''),
map(options => options ? this.filter(options) : this.options.slice())
);
});
}
ngOnDestroy() {
this.categorySubscription.unsubscribe();
}
filter(val: string): ICategory[] {
return this.options.filter(x =>
x.name.toUpperCase().indexOf(val.toUpperCase()) !== -1);
}
ICategory
Es una interfaz básica.
export interface ICategory {
value: number;
name: string;
}
Y el servicio getCategories () solo devuelve todas las categorías de una API.
El código está funcionando y construido actualmente según este ejemplo;
Ejemplo de material angular mate-autocompletado
¿Me gustaría agregar el efecto de resaltar el término en la cadena de opciones? ¿Es esto posible en absoluto?