title: PrimeNG datatable: customize filter input
body: <p>I need to toggle visibility of filter inputs placed in table header.
  I tried to do it this way: </p>
  
  <pre><code>&lt;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"/&gt; 
  </code></pre>
  
  <p><a href="https://plnkr.co/edit/o2wLmXHMb1uI5EvBmucr?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/o2wLmXHMb1uI5EvBmucr?p=preview</a></p>
  
  <p>But I have an error <strong><code>ERROR TypeError: Cannot read property 'filters' of undefined</code></strong></p>
  
  <p>So where I should get <code>dt.filters</code> object? </p>
  
  <p>------UPDATED-------</p>
  
  <p>Thanks PierreDuc for answer, but filter still doesn't work :( </p>
  
  <p>I used all parameters accordingly to template I found here <a href="https://github.com/primefaces/primeng/blob/master/src/app/components/datatable/datatable.ts" rel="nofollow noreferrer">https://github.com/primefaces/primeng/blob/master/src/app/components/datatable/datatable.ts</a></p>
  
  <p>Here's updated plunker<br>
  <a href="http://plnkr.co/edit/2MWxw0rfcLsDxmuIYRv9?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/2MWxw0rfcLsDxmuIYRv9?p=preview</a></p>