如何将自定义管道应用于ngFor迭代元素

Question

I have a custom pipe to highlight text. I want to apply this pipe to ngfor iteration elements. How can I do that?

Here is my code:

 import { PipeTransform, Pipe } from '@angular/core'; @Pipe({ name: 'highlight' }) export class HighlightPipe implements PipeTransform { transform(text: string, search): string { if (search && text) { let pattern = search.toString().replace(/[\\-\\[\\]\\/\\{\\}\\(\\)\\*\\+\\?\\.\\\\\\^\\$\\|]/g, '\\\\$&'); pattern = pattern.split(' ').filter((t) => { return t.length > 0; }).join('|'); const regex = new RegExp(pattern, 'gi'); return text.toString().replace(regex, (match) => `<span class="search-highlight">${match}</span>`); } else { return text; } } } 

 :host ::ng-deep .search-highlight{ background-color: #F2E366; } 

  <tbody> <tr *ngFor="let item of (itemsList | highlight)"> <td><i [ngClass]="{'fa fa-paperclip':item.ext === 'pdf'}"></i></td> <td>{{item.name}}<span [innerHTML]="text | highlight: searchTerm"></span></td> <td>{{item.path}}</td> <td>{{item.dateModification | date:'short':'':'fr'}}</td> </tr> </tbody> 

Answer 1

After @ChellappanV comments, specially this one , I changed my code in the search.component.html as following:

<td>{{item.name}}<span [innerHTML]="item.name | highlight: searchTerm.value"></span></td>

instead of:

<td>{{item.name}}<span [innerHTML]="text | highlight: searchTerm"></span></td>