Highlighting Keywords
Explore how to highlight keywords in Angular search results by passing the search query to components and using regular expressions with Bootstrap styling. Learn to implement keyword emphasis while managing Angular's output escaping challenges.
We'll cover the following...
One cool feature common in most search engines is highlighting the keyword in the search results. We can easily highlight keywords with Bootstrap. There’s a class called font-weight-bold, which will make a text look bold.
To accomplish this, we’ll need to provide the results component with the search term. This way, we’ll be able to know which keyword to highlight in the results.
Passing down the query
We’ll be doing the same thing we did before. We’ll store a copy of the search query in the AppComponent class. Then, we’ll send it down. In the ...