ag-grid external filter using angular2

Question

I want to implement external filtering on ag-grid with angular2.

The ag-grid example on github doesn't seem to implement external filters and a similar question has not been answered. Is there a way of implementing external filters in ag-grid with angular2?

I have the following:

Template:

<input (keyup)="updateFilters($event)" name="filterAgreementNumber" #filterAgreementNumber/>

<ag-grid-ng2 #agGrid
         style="width: 100%;"
         [style.height.px]="height"
         class="ag-fresh"
         [gridOptions]="gridOptions"
         [rowData]="promises"
         (window:resize)="onResize($event)">

Component:

export class PromisesListComponent {
    private gridOptions: GridOptions;
    private promises: Promise[];
    filterAgreementNumber = '';

    constructor(private promisesService: PromisesService) {
        this.gridOptions = {
            rowData: this.promises,
            columnDefs: this.createColumnDefs(),
            enableColResize: true,
            enableSorting: true,
            enableFilter: true,
            isExternalFilterPresent: this.externalFilterPresent,
            doesExternalFilterPass: this.externalFilterPass,            
    }

    updateFilters(event: any) {
        this.filterAgreementNumber = event.target.value; //correctly assigns property
        this.gridOptions.api.onFilterChanged();
    }

    externalFilterPass(node: any) {
        console.log(this.getFilterAgreementNumber); //undefined
        if (this.filterAgreementNumber && this.filterAgreementNumber.length > 0)
            if (node.data.AgreementCode.indexOf(this.filterAgreementNumber) === -1)
            return false;

        return true;
    }
}

The problem I am having is that this in the externalFilterPass refers to the ag-grid node and I have no way of accessing the class property.

Answer 1

In the constructor, instead of

this.gridOptions = {
   ...
   isExternalFilterPresent: this.externalFilterPresent,
   doesExternalFilterPass: this.externalFilterPass
}

try

this.gridOptions = {
   ...
   isExternalFilterPresent: this.externalFilterPresent.bind(this),
   doesExternalFilterPass: this.externalFilterPass.bind(this)
}

Now the component context will be accessible from within the ag-grid methods, and this will be what you expected it to be.

Source: https://stackoverflow.com/a/41965934/6432429