angularprimengprimeng-table

Is there a way to listen for changes in p-columnFilter match options and call a function in Angular and PrimeNG?

Is it possible to bind a function that gets called every time user chooses between matchOption of p-columnFilter.

<p-columnFilter type="date">
...
</p-columnFilter>

enter image description here

example: https://stackblitz.com/edit/owuvzd?file=src%2Fapp%2Fdemo%2Ftable-filter-menu-demo.html

Solution

  • I was able to find a workaround to this, by creating my own matchModeOptions and their filter functions.

    To do this I made use of FilterService

    public dateIsFilter: string = "is-date";

public matchModeOptions: any[] = [
  { label: "Date is", value: this.dateIsFilter }
]

constructor(private filterService: FilterService){
}

ngOnInit(): void {
  this.filterService.register(this.dateIsFilter, (value: any, filter: any) => {
  // code here
  return this.filterService.filters.dateIs(value, filter)
});
}

    Then I changed p-columnFilter to use custom matchModeOptions.

    <p-columnFilter type="date" [matchModeOptions]="this.matchModeOptions">
...
</p-columnFilter>