PrimeNG datatable: configure filter input
I need to toggle the visibility of a filter input placed in a table header. I tried to do it like this:
<input type="text"
class="ui-column-filter ui-inputtext ui-widget ui-state-default ui-corner-all"
[value]="dt.filters[col.field] ? dt.filters[col.field].value : ''"
(keyup)="dt.onFilterKeyup($event.value,col.field,col.filterMatchMode)"
*ngIf="filterIsShown"/>
https://plnkr.co/edit/o2wLmXHMb1uI5EvBmucr?p=preview
But I have a mistake ERROR TypeError: Cannot read property 'filters' of undefined
So where should I get the object dt.filters
?
------ UPDATED -------
Thanks PierreDuc for the answer, but the filter still doesn't work :(
I used all the options according to the template I found here https://github.com/primefaces/primeng/blob/master/src/app/components/datatable/datatable.ts
Here's the updated plunker
http://plnkr.co/edit/2MWxw0rfcLsDxmuIYRv9?p=preview
source to share
You have to add #dt
as a variable to <p-dataTable>
. This creates a template variable binding your instance DataTable
:
<p-dataTable ... #dt>
And you must change your method keyup
to pass the correct value:
(keyup)="dt.onFilterKeyup($event.target.value, col.field, col.filterMatchMode)"
You must, however, enter the entire word (Apple) for it to work. But I leave it to you to fix :)
source to share