Is it possible to highlight text in angular?

I am trying to highlight the search query submitted into the input in the {{receipt}} output.

component.html:

          <h5 style="text-decoration: underline">Your Receipt</h5>
          <pre>
            {{receipt}}
          </pre>
          Product Search:<input type="text" (input)="onSearchChange($event.target.value)">
          <br>
          <span>Total Price: {{total}}</span>
          </div>

component.ts:

  onSearchChange(SearchValue){
    if((this.receipt).includes(SearchValue)){
    };

As you can see, the only thing I managed to accomplish so far is to check whether or not the input which was submitted exists in the receipt variable. I would like to somehow highlight it.

Any suggestions would be appreciated. Thank you

Edit: I was looking at:
https://stackblitz.com/edit/angular-highlight-directive

But I am not sure how to implement that directive in my case

Without directive you can implement the same using the following code

In your TS file

 import { Renderer2} from '@angular/core';

 @ViewChild('refEl', { static:true }) refEl;
 
 constructor(private renderer: Renderer2) {  }

 receipt = "hello"

 onSearchChange(value){
   if((this.receipt).includes(value)){
     this.renderer.setProperty(
     this.refEl.nativeElement,
      'innerHTML',
      this.getFormattedText(value)
    );       
  };
 }

 getFormattedText(value){
    const valuestring = value.trim().split(' ')
    const re = new RegExp(`(${ valuestring.join('|') })`, 'g');
    return this.receipt.replace(re, `<span class="selected">$1</span>`);
 }

In your html

 <div>
   <h5 style="text-decoration: underline">Your Receipt</h5>
   <pre #refEl> {{receipt}} </pre>
    Product Search:<input type="text" (input)="onSearchChange($event.target.value)">
   <br>
   <span>Total Price: {{total}}</span>
 </div>

In your .css file

 ::ng-deep .selected {
   color:red;
  }

Edit : I've put together a stackblitz in case of any hurdles