mat-autocomplete filter to hightlight partial string matches

Question

I am trying to achieve a filter with mat-autocomplete that is similar to the following example;

trade input example

So I am trying to achieve the fu

Answer 1

You can use a custom pipe to highlight the partial match whenever the user types in something in the filter.

@Pipe({ name: 'highlight' })
export class HighlightPipe implements PipeTransform {
  transform(text: string, search): string {
    const pattern = search
      .replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&")
      .split(' ')
      .filter(t => t.length > 0)
      .join('|');
    const regex = new RegExp(pattern, 'gi');

    return search ? text.replace(regex, match => `<b>${match}</b>`) : text;
  }
}

---

Demo