Faites votre propre filtre pour PrimeNG angulaire 2

Question

Primefaces PrimeNG a sa propre construit en fonction de filtre comme celui-ci

<p-column field="id" header="ID" [filter]="true"></p-column> 

Je veux appeler ma propre fonction de filtre que je l'ai écrit dans un composant.

Comment l'utiliser dans PrimeNG?

Answer 1

Je pense en utilisant le rappel, où vous passez une fonction de rappel en cas onFocus:

événement onFocus: événement du navigateur pour appeler lorsque Callback déroulant obtient le focus.

Answer 2

Vous devez utiliser ng-template pour le filtre, puis vous pouvez appeler votre propre fonction en cas de changement d'entrée.

<p-column field="ColumnName" header="ColumnName" [filter]="true"            filterMatchMode="contains" [sortable]="true"> 
 
<ng-template let-col pTemplate="header"> 
 
    <span [pTooltip]="'ColumnName'" tooltipPosition="bottom" appendTo="body"> 
 
    ColumnName 
 
    </span> 
 
</ng-template> 
 
<ng-template let-col pTemplate="filter"> 
 
    <div class="txt-search-input-table" *ngIf="localSearch"> 
 
     <input id="txtColumnName" type="text" #txtColumnName (keyup)="YourOwnFunction(txtColumnName.value)" styleClass="ui-column-filter" 
 
     class="form-control pull-left ipt-width-slam" name=""/> 
 
    </div> 
 
</ng-template> 
 
<ng-template let-col let-row="rowData" pTemplate="body"> 
 
    <span appendTo="body" style="position: relative;">      
 
    {{row[col.field]}} 
 
    </span> 
 
</ng-template> 
 
</p-column>