prime-ng create custom filter for column filed set outside of data table in angular 4

Question

when I have clicked on button then data table particular column set the filter value.when I have clicked on CARG button then apply that value on the symbol column. when clear the value its show all records.

Answer 1

Solved.. using dt.filter(value,field, matchMode);

.html

<div class="ui-widget-header nopadding">
    <label *ngFor="let filterRow of Symbols_Array;let l=index;">
      <button (click)="dt.reset(); ColumnFilter(dt,filterRow.label,'symbol','')" pButton type="button" [style]="{'text-transform': 'capitalize','width':'100%'}" class="button btn-xs" [label]="filterRow.label"></button>
    </label>
  </div>
  <!--  <span style="float:right;padding: 10px; font-weight:normal;">
     Records: {{currentRecords}} of {{totalRecords}}
   </span> -->


  <!--Grid Code  -->
  <div class="example-rate-limit-reached" *ngIf="isRateLimitReached">
    API rate limit has been reached.
    <button pButton type="button" icon="fa-close" (click)="CloseMsg()" class="ui-button-danger"></button>
  </div>
  <p-messages [(value)]="msgs"></p-messages>
  <p-dataTable emptyMessage="{{tbldatamsg}}" [value]="dataset" scrollable="true" [style]="{'overflow':'hidden!important'}"
    [responsive]="true" [stacked]="stacked" [filters]="GlobalFilterValue"  [rows]="20" sortMode="multiple" [(selection)]="selectedRow" selectionMode="multiple"
    [resizableColumns]="true" columnResizeMode="expand" [paginator]="true" [globalFilter]="gb" [rowsPerPageOptions]="[10,15,20,25]"
    appendTo="body" #dt>
    <p-column styleClass="checkbox ui-resizable-column" [style]="{'width': 'auto'}" selectionMode="multiple"></p-column>
    <p-column *ngFor="let col of cols;let j=index;" [style]="{'width':'130px'}" [field]="col.field" [header]="col.header" [sortable]="true"
      [filter]="true" filterPlaceholder="Search" (mouseleave)="hoveredIndex=null" filterPlaceholder="Search" appendTo="body">
      <ng-template let-row="rowData" let-i="rowIndex" pTemplate="body">
        <!--    <div [pTooltip]="row[col.field]" [id]="col.field"> -->
        <span *ngIf="col.field==='modified'" (mouseover)="passIndexValue(i) ">
          <a style="color:black;">{{row[col.field]}}</a>
        </span>
        <p-button *ngIf="col.field==='modified' && hoveredIndex===i" appendTo="body" icon="fa fa-fw fa-eye" (click)="onRowSelect($event)"></p-button>
        <p-button *ngIf="col.field==='modified' && hoveredIndex===i" appendTo="body" icon="fa fa-fw fa-edit"></p-button>
        <p-button *ngIf="col.field==='modified' && hoveredIndex===i" appendTo="body" icon="fa fa-fw fa-trash"></p-button>
        <span *ngIf="col.field==='suggested_Value'">
          <a style="color:black;">{{row[col.field]}}</a>
        </span>
        <span (mouseover)="hoveredIndex=null" *ngIf="col.field!='modified'  && col.field!='suggested_Value'" >
          {{row[col.field]}}
        </span>
       </ng-template>
   <!--<ng-template pTemplate="filter" let-colvalue>
              <input *ngIf="col.field==='symbol'" type="text" pInputText  style="width:100%" [(ngModel)]="SymbolFilterValue" (onChange)="ApplySymbolFilter(dt,SymbolFilterValue,col.field,col.filterMatchMode)" (input)="ColumnFilter(dt, $event.srcElement.value, col.field, col.filterMatchMode)" class="ui-column-filter"/>
              <input *ngIf="col.field!='symbol'" type="text" pInputText  style="width:100%" (input)="ColumnFilter(dt, $event.srcElement.value, col.field, col.filterMatchMode)" class="ui-column-filter"/>
      </ng-template> -->
    </p-column>
    <!-- test multiselect -->
    <!-- <p-footer>
    <ul>
      <li *ngFor="let dataset of selectedRow" style="text-align: left">{{dataset.modified+ +dataset.case_ID }}</li>
    </ul>
  </p-footer> -->
  </p-dataTable>
</div>

---

.ts

import import { SelectItem, Message, DataTable } from 'primeng/primeng'; add this in ts @ViewChild(('dt')) dt: DataTable;

    import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
    import { UrlsService } from '../../../Shared/Services/urls.service';
    import { UserService } from '../../../Shared/Services/user.service';
    import { SharedHttpClientService } from '../../../Shared/Services/shared-http-client.service';
    import { SelectItem, Message, DataTable } from 'primeng/primeng';
    import { Validators, FormControl, FormGroup, FormBuilder } from '@angular/forms';
    import { APIURL } from 'app/Shared/Constant/Url_User';
    import { HttpErrorResponse } from '@angular/common/http';;
    @Component({
      selector: 'app-oatsexception',
      templateUrl: './oatsexception.component.html',
      styleUrls: ['./oatsexception.component.scss']
    })
    export class OATSExceptionComponent implements OnInit {
      @ViewChild(('dt')) dt: DataTable;

    //code

     /****Custome ColumnFilter Function */
      ColumnFilter(dt, value, field, matchMode) {
        //console.log("Datatable ="+dt+" value "+value+" field ="+JSON.stringify(field));
        dt.filter(value,field, matchMode);
      }

prepareData() {
    this.tbldatamsg = "L o a d i n g . . . . .";
    //console.log("this.FilterData"+JSON.stringify(this.FilterData)); 
    this.loading = true;
    this.isLoadingResults = true;
    let Data = { "data": this.FilterData, "mpid": this.UserService.getActiveMPID() };
    this.SharedHttpClientService.post(
      this.UrlsService.setAPIURl(
        APIURL.Surveillance_OatsException_Summary),
      Data)
      .map((response: Response) => {
        this.isLoadingResults = false;
        this.isRateLimitReached = false;
        return response.json();
      })
      .subscribe(Element => {
        let data:any=Element;
        this.dataset=data.Data;
        let symbol:any=data.Synbol;
        for (var i = 0; i < symbol.length; i++) {
          this.Symbols_Array[i] ={ label: symbol[i]};
        }
        console.log(this.dataset,this.Symbols_Array);
        if (this.dataset === "" || this.dataset == null) {
          this.tbldatamsg = "No data found";
        }
      },
        (err: HttpErrorResponse) => {
          this.isLoadingResults = false;
          this.isRateLimitReached = true;
          alert(err);
        });
    this.loading = false;

  }
    //code
    }