Как применить пользовательский канал к элементам итерации ngFor

Question

У меня есть собственный канал для выделения текста.Я хочу применить этот канал к элементам ngfor итерации.Как я могу это сделать?

Вот мой код:

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

После комментариев @ChellappanV, особенно этого один , я изменил свой код в search.component.html следующим образом:

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

вместо:

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