how to set icon instead of placeholder angular 2

Question

I have implemented filter of datatable of primeng. my code is as below:

<p-column field="time" header="Time" [filter]="true" filterPlaceholder="" filterMatchMode="in">
  <ng-template pTemplate="filter" let-col>
    <p-multiSelect [options]="timeOptions" styleClass="ui-column-filter" (onChange)="dt.filter($event.value,col.field,col.filterMatchMode)"></p-multiSelect>
  </ng-template>
</p-column>

and output is like this:

But I want search icon instead of dropdown field. Can anyone suggest any solution?

Answer 1

You can achive that by simply using [hidden] and one more extra variable showFilter :

<p-column field="time" header="Time" [filter]="true" filterPlaceholder="" filterMatchMode="in">
  <ng-template pTemplate="filter" let-col>
    <i class='fa fa-search' (click)='showFilter = !showFilter'></i>
    <p-multiSelect [hidden]="!showFilter"
                    [options]="timeOptions" 
                    styleClass="ui-column-filter" 
                    (onChange)="dt.filter($event.value,col.field,col.filterMatchMode)">
    </p-multiSelect>
  </ng-template>
</p-column>