0

I currently have a simple search function implemented here that allows you to search for courses. Currently the user can see a preview of the description and the keywords using a read-more component. I would like to add the additional functionality that a user can see the context of the description or keywords their query matched. For example, if a user queries probability, there will be a match in both the description and the keywords for 89A Statistics and I would like the user to see the snippet of the first x characters before the match + the match + the next x characters that doesn't exceed the length of the string.

I am relatively new to Angular, is it possible to access the search query bound to ngModel from the main component in the read-more component? This way I could possibly define this.currentText as the relevant snippet and have the toggleView display the entire text. 

if (this.isCollapsed == true) {
      this.currentText = this.text.substring(0, this.maxLength) + "...";

Thank you for the help!

Matt
  • 463
  • 2
  • 9
  • 18

1 Answers1

0

You can simply add it as an @Input() as well:

app.component.html

<read-more 
     [text]="course?.description | highlight : searchText" 
     [maxLength]="100"
     [query]="searchText"> </read-more>
mchl18
  • 2,119
  • 12
  • 20