[SOLVED] how to bold search pattern in search results in angular 2 material table


I searched for “ium”. 3 rows matched and showed in search results. How do I now bold just the “ium” in the search results like the iphone phone directory search. Running demo and code is here


One solution is to create a custom pipe and apply it to the content within each template expression.

You can, of course, make your bold.pipe.ts wrap its passed in value with <strong></strong> instead of <mark></mark>, so that your filtered results are made bold and not highlighted.

You would have to bind the value of the filtered input to the pipe’s arguments, so it would look something like this:

<td>{{ element.name | bold: filter }}</td>,
where filter is the searched value.

Do note that the linked answer will return undefined on an empty filter value.

Stack Overflow answer credited to Fahad Nisar

Answered By – Drew Thompson

Answer Checked By – Dawn Plyler (BugsFixing Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *