angulartypescriptfilterprimengglobal-filter

global filter does not work when click the remove icon

I have used priming global filter 

<input #gb1 type="text" pInputText class="ui-widget ui-text" 
 placeholder="Find"><img class="search" src="assets/images/Search.png" />

 <p-dataTable class="ui-widget-h1-header1" [value]="searchHistoryList" 
[responsive]="true" [rows]="10" [globalFilter]="gb1" #dt1>...

Everything is working good. but it's not working if am clear the values when clicking remove icon.

I have checked in https://www.primefaces.org/primeng/#/datatable/filter document. but there also having the same issue with in the latest version :( :(

Solution

  • Here is work around to address your issue.

    Trick here is to emit a keyup event when user click on 'X' icon to clear filter text.This is because primeng datatable component only refresh it's filter state when 'keyup' event has occurred.

    (search) event is fired when user click 'X' icon, This is when input type='search'. Please correct this in your question statement where you have mentioned as type='text'.

    your.component.html

    <input #gb1 (search)="refreshFilterState()" [(ngModel)]="filterText" type="search" pInputText class="ui-widget ui-text" placeholder="Find"><img class="search" src="assets/images/Search.png"/>


<p-dataTable class="ui-widget-h1-header1" [value]="searchHistoryList" [responsive]="true" [rows]="10" [globalFilter]="gb1" #dt1> --

    your.component.ts

    import {InputText} from 'primeng/primeng'
@ViewChild('gb1') inputtext: InputText;

refreshFilterState(){
   this.inputtext['nativeElement'].dispatchEvent(new KeyboardEvent('keyup'));
 }