Вы можете использовать компонент автозаполнения Angular Material, чтобы сделать это легко: https://material.angular.io/components/autocomplete/examples
Приведенные здесь примеры очень хороши для начала.
Затем, чтобы выделить искомый текст, вы можете использовать канал в промежутке, который показывает текст. Если я использую автозаполнение материала в качестве примера, оно будет выглядеть так:
<mat-option *ngFor="let state of filteredStates | async" [value]="state.name">
<span [innerHTML]="state.name | highlightSearch:stateCtrl.value"></span>
</mat-option>
С трубой:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'highlightSearch'
})
export class HighlightSearchPipe implements PipeTransform {
transform(value: string, search: string): string {
return value.replace(new RegExp('(?![^&;]+;)(?!<[^<>]*)(' + search + ')(?![^<>]*>)(?![^&;]+;)', 'gi'), '<strong class="your-class">$1</strong>');
}
}
Канал будет печатать набранный текст жирным шрифтом и применять любой класс CSS в вашем классе.
Я уверен, что есть лучшие решения. Это сработало для меня.
Надеюсь, это поможет!