How to highlight the ones that is being search from the list using primeng in angular2

Question

i have a list of data. When i keyIn, it gives me the list of items based on that filter. So now i need to highlight the list with different color, based on search. Please help.

HTML:

<input autocomplete='off' type="text" pInputText size="30" placeholder="Search" (change)="searchFacility(searchFname)" (keyup)="searchFacility(searchFname)"
                [(ngModel)]="searchFname" class="pull-right textind10">

<div class="content-section implementation col-lg-12 col-md-12 col-sm-12 col-xs-12 nopadding text-center">
            <p-dataTable [value]="payerOfficesList | searchPayerOffices : sLetter" expandableRows="true" #dtFacilities [paginator]="true"
                sortMode="multiple" [rows]="10" [pageLinks]="3" [rowsPerPageOptions]="[5,10,20]" [globalFilter]="gb" [tableStyleClass]="'table table-bordered mrgtop15'">
                <p-column styleClass="col-icon" [style]="{'width':'40px'}">
                    <ng-template let-col let-fList="rowData" pTemplate="body">
                        <a *ngIf="fList.memberFacilities.length > 0" (click)="dtFacilities.toggleRow(fList)">
                            <i *ngIf="!dtFacilities.isRowExpanded(fList)" class="fa fa-chevron-circle-right" [style]="{'margin-top':'5px'}"></i>
                            <i *ngIf="dtFacilities.isRowExpanded(fList)" class="fa fa-chevron-circle-down"></i>
                        </a>
                    </ng-template>
                </p-column>
                <p-column field="facilityName" header="Payer Office Name" [sortable]="true">
                    <ng-template let-col let-fList="rowData" pTemplate="body">
                        <span pTooltip="{{fList.facilityName}} ({{fList.facilityType}})" tooltipPosition="top">
                            <a (click)="selectedFacility(fList.facilityID)">
                                <strong>{{fList.facilityName}}</strong>
                            </a>
                            (
                            <span>{{fList.facilityType}}</span>)
                        </span>
                    </ng-template>
                </p-column>

            </p-dataTable>
        </div>

Ts:

searchFacility(search) {
this.sLetter = search;
if (search) {
  this.dtFacilities.expandedRows = [];
  setTimeout(() => {
    this.dtFacilities.expandedRows = this.dtFacilities.value;
  }, 100);
  // this.dtFacilities.expandedRows = this.dtFacilities.value;
}
else {
  this.dtFacilities.expandedRows = [];
}
}

Filter code:

  transform(value: PayerOfficesList[], filterBy: any): PayerOfficesList[] {
            if (filterBy && value) {
                let pattern = filterBy.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
                pattern = pattern.split(' ').filter((t) => {
                  return t.length > 0;
                }).join('|');
                const regex = new RegExp(pattern, 'gi');

                return filterBy.replace(regex, (match) => `<span class="search-highlight">${match}</span>`);
              }

This is the filter code i have used, and there that doesnt work

Answer 1

It looks like, you need to highlight your filtered data. We can achieve that using custom pipe in angular

You can refer here , possibly a duplicate thread.

{{ fList.facilityName | highlight : 'search' }}