How to use bypassSecurityTrustHtml in a component for highlighting?

Question

I built a search component to search for names in a list.

List that is grouped by date.

When I enter the search field I would like the items in the list to highlight if they match with the search.

I could do it in a pipe but when I postpone the code in a component the highlighting does not work anymore.

Pipe : https://stackblitz.com/edit/angular-searchpipe-bmzzez

Component: https://stackblitz.com/edit/highlihgt

I use DomSanitizer to display the text in the html, but it does not work.

I do not know if DomSanitizer is the best solution.

The function of the component that should display the highlight :

   handleChange($event: string) {
     function filter(messageArray, value) {
      function subFind( array, [key, ...keys]) {
         return keys.length
          ? array
        .map(o => {
          const temp = subFind(o[key], [keys]);
          return temp.length && Object.assign({}, o, { [key]: temp });
        })
        .filter(Boolean)
      : array.filter(o => o[key].toLowerCase().includes(value.toLowerCase()));
  }
  return subFind(messageArray, ['value', 'name']);
}
 this.filteredList = this.filteredList.map(item =>
  ({
    ...item,
    name: this._sanitizer.bypassSecurityTrustHtml(
      item.value.forEach(el => {
        el.name.replace($event, `<span style='font-weight:bolder'>${$event}</span>`);
      })
    )
  })
);
this.filteredList = filter(this.targetData, $event);
}

the html :

  <search-message (searchChanged)="handleChange($event)"></search-message>
  <ul>
    <div *ngFor="let player of filteredList"> Team : {{player.key}}
        <li *ngFor="let eachplayer of player.value">
          <span [innerHTML]="eachplayer.name"></span>
      </li>
   </div>
 </ul>

Greg, reorder the sanitize function after filter(this.targetData, $event) and your map functions require modifications. Have a look here — Chenna
– Chenna, Commented Oct 7, 2019 at 10:27
@Chenna I agree with you, there is indeed a problem for the "name" which is not in the right place. He should be a child of value. — Greg-A
– Greg-A, Commented Oct 7, 2019 at 11:53

jitender · Accepted Answer · 2019-10-07 10:13:15Z

2

Try adding style after filter method call like

 this.filteredList = filter(this.targetData, $event);
     this.filteredList.forEach(i=>{
       i.value.forEach(v=>{
         v.name=this._sanitizer.bypassSecurityTrustHtml(`<span style='background:yellow'>${v.name}</span>`);
       })
     })

demo

answered Oct 7, 2019 at 10:13

jitender

10.4k1 gold badge22 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Greg-A Over a year ago

This is not really the right solution because here the whole word is highlighted or it should highlight only the characters entered in the input field and match with the name, as in the pipe above

jitender Over a year ago

using this SO post you can update accordingly demo

Greg-A Over a year ago

it's ok for you demo

Collectives™ on Stack Overflow

How to use bypassSecurityTrustHtml in a component for highlighting?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related