Filter Component

interface IFilterComp {
    // Mandatory methods

    // The init(params) method is called on the filter once. See below for details on the
    // parameters.
    init(params: IFilterParams): void;

    // Returns the DOM element for this filter
    getGui(): HTMLElement;

    // Return true if the filter is active. If active then 1) the grid will show the filter icon in the column
    // header and 2) the filter will be included in the filtering of the data.
    isFilterActive(): boolean;

    // The grid will ask each active filter, in turn, whether each row in the grid passes. If any
    // filter fails, then the row will be excluded from the final set. A params object is supplied
    // containing attributes of node (the rowNode the grid creates that wraps the data) and data (the data
    // object that you provided to the grid for that row).
    doesFilterPass(params: IDoesFilterPassParams): boolean;

    // Gets the filter state. If filter is not active, then should return null/undefined.
    // The grid calls getModel() on all active filters when gridApi.getFilterModel() is called.
    getModel(): any;

    // Restores the filter state. Called by the grid after gridApi.setFilterModel(model) is called.
    // The grid will pass undefined/null to clear the filter.
    setModel(model: any): void;


    // Optional methods

    // Gets called every time the popup is shown, after the GUI returned in
    // getGui is attached to the DOM. If the filter popup is closed and re-opened, this method is
    // called each time the filter is shown. This is useful for any logic that requires attachment
    // before executing, such as putting focus on a particular DOM element. The params has one
    // callback method 'hidePopup', which you can call at any later point to hide the popup - good
    // if you have an 'Apply' button and you want to hide the popup after it is pressed.
    afterGuiAttached?(params?: { hidePopup?: Function }): void;

    // Gets called when new rows are inserted into the grid. If the filter needs to change its
    // state after rows are loaded, it can do it here. For example the set filters uses this
    // to update the list of available values to select from (e.g. 'Ireland', 'UK' etc for
    // Country filter).
    onNewRowsLoaded?(): void;

    // Gets called when the column is destroyed. If your custom filter needs to do
    // any resource cleaning up, do it here. A filter is NOT destroyed when it is
    // made 'not visible', as the GUI is kept to be shown again if the user selects
    // that filter again. The filter is destroyed when the column it is associated with is
    // destroyed, either when new columns are set into the grid, or the grid itself is destroyed.
    destroy?(): void;

    // If floating filters are turned on for the grid, but you have no floating filter
    // configured for this column, then the grid will check for this method. If this
    // method exists, then the grid will provide a read-only floating filter for you
    // and display the results of this method. For example, if your filter is a simple
    // filter with one string input value, you could just return the simple string
    // value here.
    getModelAsString?(model: any): string;
}

interface IFilterParams {
    // The column this filter is for
    column: Column;

    // The column definition for the column
    colDef: ColDef;

    // The row model, helpful for looking up data values if needed.
    // If the filter needs to know which rows are a) in the table,
    // b) currently visible (i.e. not already filtered), c) which groups,
    // d) what order - all of this can be read from the rowModel.
    rowModel: IRowModel;

    // A function callback to be called when the filter changes. The
    // grid will then respond by filtering the grid data. The callback
    // takes one optional parameter which, if included, will get merged
    // to the FilterChangedEvent object (useful for passing additional
    // information to anyone listening to this event, however such extra
    // attributes are not used by the grid).
    filterChangedCallback: (additionalEventAttributes?: any) => void;

    // A function callback, to be optionally called, when the filter UI changes.
    // The grid will respond with emitting a FilterModifiedEvent. Apart from
    // emitting the event, the grid takes no further action.
    filterModifiedCallback: () => void;

    // A function callback for the filter to get cell values from the
    // row data. Call with a node to be given the value for that filter's
    // column for that node. The callback takes care of selecting the
    // right column definition and deciding whether to use valueGetter
    // or field etc. This is useful in, for example, creating an Excel
    // style filter, where the filter needs to lookup available values
    // to allow the user to select from.
    valueGetter: (rowNode: RowNode) => any;

    // A function callback, call with a node to be told whether the node
    // passes all filters except the current filter. This is useful if you
    // want to only present to the user values that this filter can filter
    // given the status of the other filters. The set filter uses this to
    // remove from the list, items that are no longer available due to the
    // state of other filters (like Excel type filtering).
    doesRowPassOtherFilter: (rowNode: RowNode) => boolean;

    // The context for this grid. See section on Context
    context: any;

    // The grid API
    api: any;

    // Only if using AngularJS (ie Angular v1), if angularCompileFilters
    // is set to true, then a new child scope is created for each column
    // filter and provided here.
    $scope: any;
}

interface IDoesFilterPassParams {
    // The row node in question
    node: RowNode;

    // The data part of the row node in question
    data: any;
}

// create your filter as a Polymer component
export default class PartialMatchFilter extends PolymerElement {
    static get template() {
        return html`
        Filter: <input style="height: 20px" id="input" on-input="onChange" value="{{text::input}}">
        `;
    }

    agInit(params) {
        this.params = params;
        this.valueGetter = params.valueGetter;
    }

    static get properties() {
        return {
            text: String
        };
    }

    isFilterActive() {
        return this.text != null && this.text !== '';
    }

    doesFilterPass(params) {
        return this.text.toLowerCase()
            .split(" ")
            .every(filterWord => this.valueGetter(params.node).toString().toLowerCase().indexOf(filterWord) >= 0);
    }

    getModel() {
        return {value: this.text};
    }

    setModel(model) {
        this.text = model ? model.value : '';
    }

    afterGuiAttached(params) {
        this.$.input.focus();
    }

    onChange(event) {
        const newValue = event.target.value;

        if (this.text !== newValue) {
            this.text = newValue;
            this.params.filterChangedCallback();
        }
    }
}

customElements.define('partial-match-filter', PartialMatchFilter);

// then reference the Component in your colDef like this
colDef = {
    // we use cellRendererFramework instead of cellRenderer
    filterFramework: 'partial-match-filter'

    // specify all the other fields as normal
    headerName: 'Name',
    field: 'firstName',
    ...
}

agInit(params: IFilterParams): void {
    this.params = params;
    this.valueGetter = params.valueGetter;
}

// let's assume a Polymer component as follows
export default class PartialMatchFilter extends PolymerElement {
    static get template() {
        return html`
            Filter: <input style="height: 20px" id="input" on-input="onChange" value="{{text::input}}">

        `;
    }
    ... // standard filter methods hidden

    // put a custom method on the filter
    myMethod() {
        // does something
    }
}

// later in your app, if you want to execute myMethod()...
laterOnInYourApplicationSomewhere() {
    // get reference to the ag-Grid Filter component
    const agGridFilterInstance = this.gridOptions.api.getFilterInstance('name');

    // get Polymer instance from the ag-Grid instance
    const polymerFilterInstance = agGridFilterInstance.getFrameworkComponentInstance();

    // now we're sucking diesel!!!
    polymerFilterInstance.myMethod();
}