PrimeNG datatable: customize filter input

I need to toggle visibility of filter inputs placed in table header. I tried to do it this way:

<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 an error ERROR TypeError: Cannot read property 'filters' of undefined

So where I should get dt.filters object?

------UPDATED-------

Thanks PierreDuc for answer, but filter still doesn't work :(

I used all parameters accordingly to template I found here https://github.com/primefaces/primeng/blob/master/src/app/components/datatable/datatable.ts

Here's updated plunker
http://plnkr.co/edit/2MWxw0rfcLsDxmuIYRv9?p=preview

PrimeNG datatable: customize filter input

1 Answers