Reset filter value in primeNG table

Question

<p-table #dtadd [value]="gridList" [alwaysShowPaginator]="false" [rows]="5" [paginator]="true" [(first)]="add" [(selection)]="customCodeGroupModel.codeGrouingTypeID" [responsive]="true">

            <ng-template pTemplate="header" let-columns>
              <tr>
                <th [pSortableColumn]="'codeSetDescription'" style="width:25%;">
                  Code Set
                  <p-sortIcon [field]="'codeSetDescription'"></p-sortIcon>
                </th>
                <th [pSortableColumn]="'codeTypeName'" style="width:25%;">
                  Code Type
                  <p-sortIcon [field]="'codeTypeName'"></p-sortIcon>
                </th>

                <th style="width:7%;">Action</th>
              </tr>
              <tr>
                <th><input id="yourInputId" pInputText type="text" style="width:150px"
                    (input)="dtadd.filter($event.target.value, 'codeSetDescription', 'contains')">
                </th>
                <th>
                  <input id="yourInputId" pInputText type="text" style="width:150px"
                    (input)="dtadd.filter($event.target.value, 'codeTypeName', 'contains')">

                </th>

                <th></th>
              </tr>

            </ng-template>
            <ng-template pTemplate="body" let-grouperList>
              <tr>
                <td title="{{grouperList.codeSetDescription}}">
                  {{grouperList.codeSetDescription}}</td>
                <td title="{{grouperList.codeTypeName}}">
                  {{grouperList.codeTypeName}}</td>

                <td>
                  <p-tableRadioButton [value]="grouperList"></p-tableRadioButton>
                </td>

              </tr>
            </ng-template>
            <ng-template pTemplate="emptymessage" let-columns>
              <tr>
                <td [attr.colspan]="2" class="align-center">
                  No records found
                </td>
              </tr>
            </ng-template>
          </p-table>

<th>
      <input pInputText type="text" (input)="dt.filter($event.target.value, 'codeSetDescription', 'contains')"
       [value]="dt.filters['codeSetDescription'] ? dt.filters['codeSetDescription'].value : ''">
    </th>

And By using ng Model is not working to reset the filter i.e

Example:

<input pInputText type="text" [(ngModel)]="dt22" (input)="dt.filter($event.target.value, 'date', 'contains')">

How i can reset the filter values?

Answer 1

try this solution.

<button pButton label="Clear" class="p-button-raised m-2" icon="pi pi-filter-slash" (click)="clearFilter(dtadd)"></button>


clearFilter(table: Table) {
 table.clear();
}