javascript - Highlight the search text - angular 2 -

a messenger displays search results based on input given user. need highlight word been searched, while displaying result. these html , component been used.

component.html

 <div *ngfor = "let result of resultarray"> <div>id : result.id </div> <div>summary : result.summary </div> <div> link : result.link </div> </div> 

component.ts

resultarray : = [{"id":"1","summary":"these results searched text","link":"http://www.example.com"}] 

this resultarray fetched hitting backend service sending search text input. based on search text, result fetched. need highlight searched text, similar google search. please find screenshot,

if search word "member", occurence of word "member" gets highlighted. how achieve same using angular 2. please suggest idea on this.

you can creating pipe , applying pipe summary part of array inside ngfor. here code pipe:

import { pipe, pipetransform } '@angular/core';  @pipe({     name: 'highligh' })  export class highlightsearch implements pipetransform {      transform(value: any, args: any): {         var re = new regexp(args, 'gi'); //'gi' case insensitive , can use 'g' if want search case sensitive.         return value.replace(re, "<mark>" + args + "</mark>");     } } 

and in markup apply on string this:

<div innerhtml="{{ str | highligh : 'search'}}"></div> 

replace 'search' word want highlight.

hope help.