Highlighting Keywords

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 app.component.ts file, we’ll add a property called query.