1

I have a table with filters, defined as such:

<p-columnFilter ... >
    <ng-template pTemplate="filter" let-value let-filterCallback="filterCallback">
        <ng-container [ngSwitch]="matchMode">
            <filter-one *ngSwitchCase="contains"></filter-one>
            <filter-two *ngSwitchCase="startsWith"></filter-two>
        </ng-container>
    </ng-template>
</p-columnFilter>

By switching between different matching modes I wish to change the way the filter is displayed. My problem is that primeng column filter does not expose it's match mode (there is no event) so I cannot react to match mode changes.

klemen kobau
  • 117
  • 2
  • 11

1 Answers1

3

I had the same problem, you need to save the column filter as a template variable (the #colFilter below) and then you can access it in your template. The match mode is not directly on the ColumnFilter but it is stored inside the table, which is referenced by the ColumnFilter, as you can see here, to access it in the template we retrieve our filter inside the filters of the table colFilter.dt.filters[field] (and cast it to any to avoid errors, because it could be also an array of filters, but we assume it's not), then we can access its matchMode.

<p-columnFilter ... [field]="field" #colFilter>
    <ng-template pTemplate="filter" let-value let-filterCallback="filterCallback">
        <ng-container [ngSwitch]="$any(colFilter.dt.filters[field]).matchMode">
            <filter-one *ngSwitchCase="contains"></filter-one>
            <filter-two *ngSwitchCase="startsWith"></filter-two>
        </ng-container>
    </ng-template>
</p-columnFilter>
Xriuk
  • 429
  • 5
  • 16