Issue
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
Solution
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)