Angular Custom Filter Component

<!DOCTYPE html>
<html>
<head>
    <title>Angular 2 ag-Grid starter</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style> html, body { margin: 0; padding: 0; height: 100%; } </style>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css"/>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>


    <!-- Polyfills -->
    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js@0.8.17?main=browser"></script>
    <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>

    <script>
        var appLocation = '';
        var boilerplatePath = '';
        var systemJsMap = {"ag-grid":"https:\/\/unpkg.com\/ag-grid@16.0.0\/dist\/ag-grid.js","ag-grid\/main":"https:\/\/unpkg.com\/ag-grid@16.0.0\/dist\/ag-grid.js","ag-grid-enterprise":"https:\/\/unpkg.com\/ag-grid-enterprise@16.0.0\/","ag-grid-react":"npm:ag-grid-react@16.0.0\/","ag-grid-angular":"npm:ag-grid-angular@16.0.0\/"};
    </script>

    <script src="systemjs.config.js"></script>

    <script>
    System.import('main.ts').catch(function(err){ console.error(err); });
    </script>

</head>
<body>
    <my-app>Loading ag-Grid example&hellip;<my-app>
</body>
</html>

import { Component, ViewChild } from "@angular/core";
import { PartialMatchFilter } from "./partial-match-filter.component";
import { RecordTypeFilter } from './record-type-filter.component';

@Component({
  selector: "my-app",
  template: `<button style="margin-bottom: 10px" (click)="onClicked()" class="btn btn-primary">Invoke Filter Instance Method</button>
<div style="height: 100%; box-sizing: border-box;">
    <ag-grid-angular
    #agGrid
    style="width: 100%; height: 100%;"
    id="myGrid"
    class="ag-theme-fresh"
    [columnDefs]="columnDefs"
    [rowData]="rowData"
    [enableFilter]="true"
    [frameworkComponents]="frameworkComponents"
    (gridReady)="onGridReady($event)"
    ></ag-grid-angular>
</div>
`
})
export class AppComponent {
  private gridApi;
  private gridColumnApi;

  private columnDefs;
  private rowData;
  private frameworkComponents;

  constructor() {
    this.columnDefs = [
      {
        headerName: "Row",
        field: "row",
        width: 450
      },
      {
        headerName: "Filter Component",
        field: "name",
        filter: "partialMatchFilter",
        width: 430,
        menuTabs: ["filterMenuTab"]
      },
      {
        headerName: "Employee Type",
        field: "employeeType",
        filter: "recordTypeFilter",
        width: 430,
        menuTabs: ["filterMenuTab"]
      }
    ];
    this.rowData = createRowData();
    this.frameworkComponents = { 
      partialMatchFilter: PartialMatchFilter,
      recordTypeFilter: RecordTypeFilter
    };
  }

  onClicked() {
    this.gridApi
      .getFilterInstance("name")
      .getFrameworkComponentInstance()
      .componentMethod("Hello World!");
  }

  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;

    params.api.sizeColumnsToFit();
  }
}

function createRowData() {
  return [
    {
      row: "Row 1",
      name: "Michael Phelps", employeeType: "Permanent"
    },
    {
      row: "Row 2",
      name: "Natalie Coughlin", employeeType: "Contractor"
    },
    {
      row: "Row 3",
      name: "Aleksey Nemov", employeeType: "Permanent"
    },
    {
      row: "Row 4",
      name: "Alicia Coutts", employeeType: "Contractor"
    },
    {
      row: "Row 5",
      name: "Missy Franklin", employeeType: "Permanent"
    },
    {
      row: "Row 6",
      name: "Ryan Lochte", employeeType: "Contractor"
    },
    {
      row: "Row 7",
      name: "Allison Schmitt", employeeType: "Permanent"
    },
    {
      row: "Row 8",
      name: "Natalie Coughlin", employeeType: "Contractor"
    },
    {
      row: "Row 9",
      name: "Ian Thorpe", employeeType: "Permanent"
    },
    {
      row: "Row 10",
      name: "Bob Mill", employeeType: "Contractor"
    },
    {
      row: "Row 11",
      name: "Willy Walsh", employeeType: "Permanent"
    },
    {
      row: "Row 12",
      name: "Sarah McCoy", employeeType: "Contractor"
    },
    {
      row: "Row 13",
      name: "Jane Jack", employeeType: "Permanent"
    },
    {
      row: "Row 14",
      name: "Tina Wills", employeeType: "Contractor"
    }
  ];
}

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms"; // <-- NgModel lives here
// HttpClient
import { HttpClientModule } from "@angular/common/http";

// ag-grid
import { AgGridModule } from "ag-grid-angular";
import { AppComponent } from "./app.component";

import { PartialMatchFilter } from "./partial-match-filter.component";
import { RecordTypeFilter } from './record-type-filter.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule, // <-- import the FormsModule before binding with [(ngModel)]
    HttpClientModule,
    AgGridModule.withComponents([PartialMatchFilter, RecordTypeFilter])
  ],
  declarations: [AppComponent, PartialMatchFilter, RecordTypeFilter],
  bootstrap: [AppComponent]
})
export class AppModule {}

import {Component, ViewChild, ViewContainerRef} from "@angular/core";

import {IAfterGuiAttachedParams, IDoesFilterPassParams, IFilterParams, RowNode} from "ag-grid";
import {IFilterAngularComp} from "ag-grid-angular";

@Component({
    selector: 'filter-cell',
    template: `
        <div class="container">
            Partial Match Filter: <input #input (ngModelChange)="onChange($event)" [ngModel]="text" class="form-control">
        </div>
    `, styles: [
        `
            .container {
                border: 2px solid #22ff22;
                border-radius: 5px;
                background-color: #bbffbb;
                width: 200px;
                height: 50px
            }
            
            input {
                height: 20px
            }
        `
    ]
})
export class PartialMatchFilter implements IFilterAngularComp {
    private params: IFilterParams;
    private valueGetter: (rowNode: RowNode) => any;
    public text: string = '';

    @ViewChild('input', {read: ViewContainerRef}) public input;

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

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

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

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

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

    ngAfterViewInit(params: IAfterGuiAttachedParams): void {
        setTimeout(() => {
            this.input.element.nativeElement.focus();
        })
    }

    // noinspection JSMethodCanBeStatic
    componentMethod(message: string): void {
        alert(`Alert from PartialMatchFilterComponent ${message}`);
    }

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

// Angular entry point file
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from 'app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

/**
 * WEB ANGULAR VERSION
 * (based on systemjs.config.js from the angular tutorial - https://angular.io/tutorial)
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
var templateUrlRegex = /templateUrl\s*:(\s*['"`](.*?)['"`]\s*)/gm;
var stylesRegex = /styleUrls *:(\s*\[[^\]]*?\])/g;
var stringRegex = /(['`"])((?:[^\\]\\\1|.)*?)\1/g;

module.exports.translate = function(load){
  if (load.source.indexOf('moduleId') != -1) return load;

  var url = document.createElement('a');
  url.href = load.address;

  var basePathParts = url.pathname.split('/');

  basePathParts.pop();
  var basePath = basePathParts.join('/');

  var baseHref = document.createElement('a');
  baseHref.href = this.baseURL;
  baseHref = baseHref.pathname;

  if (!baseHref.startsWith('/base/')) { // it is not karma
    basePath = basePath.replace(baseHref, '');
  }

  load.source = load.source
    .replace(templateUrlRegex, function(match, quote, url){
      var resolvedUrl = url;

      if (url.startsWith('.')) {
        resolvedUrl = basePath + url.substr(1);
      }

      return 'templateUrl: "' + resolvedUrl + '"';
    })
    .replace(stylesRegex, function(match, relativeUrls) {
      var urls = [];

      while ((match = stringRegex.exec(relativeUrls)) !== null) {
        if (match[2].startsWith('.')) {
          urls.push('"' + basePath + match[2].substr(1) + '"');
        } else {
          urls.push('"' + match[2] + '"');
        }
      }

      return "styleUrls: [" + urls.join(', ') + "]";
    });

  return load;
};

/**
 * WEB ANGULAR VERSION
 * (based on systemjs.config.js from the angular tutorial - https://angular.io/tutorial)
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
    var ANGULAR_VERSION = '5.1.3';

    System.config({
        // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
        transpiler: 'ts',
        typescriptOptions: {
            // Copy of compiler options in standard tsconfig.json
            target: 'es5',
            module: 'system', //gets rid of console warning
            moduleResolution: 'node',
            sourceMap: true,
            emitDecoratorMetadata: true,
            experimentalDecorators: true,
            lib: ['es2015', 'dom'],
            noImplicitAny: true,
            suppressImplicitAnyIndexErrors: true
        },
        meta: {
            typescript: {
                exports: 'ts'
            }
        },
        paths: {
            // paths serve as alias
            'npm:': 'https://unpkg.com/'
        },
        // RxJS makes a lot of requests to unpkg. This guy addressed it:
        // https://github.com/OasisDigital/rxjs-system-bundle.
        bundles: {
            'npm:rxjs-system-bundle@5.5.5/Rx.system.js': [
                'rxjs',
                'rxjs/*',
                'rxjs/operator/*',
                'rxjs/operators/*',
                'rxjs/observable/*',
                'rxjs/scheduler/*',
                'rxjs/symbol/*',
                'rxjs/add/operator/*',
                'rxjs/add/observable/*',
                'rxjs/util/*'
            ]
        },
        // map tells the System loader where to look for things
        map: Object.assign(
            {
                // angular bundles
                '@angular/animations': 'npm:@angular/animations@' + ANGULAR_VERSION + '/bundles/animations.umd.js',
                '@angular/animations/browser': 'npm:@angular/animations@' + ANGULAR_VERSION + '/bundles/animations-browser.umd.js',
                '@angular/core': 'npm:@angular/core@' + ANGULAR_VERSION + '/bundles/core.umd.js',
                '@angular/common': 'npm:@angular/common@' + ANGULAR_VERSION + '/bundles/common.umd.js',
                '@angular/common/http': 'npm:@angular/common@' + ANGULAR_VERSION + '/bundles/common-http.umd.js',
                '@angular/compiler': 'npm:@angular/compiler@' + ANGULAR_VERSION + '/bundles/compiler.umd.js',
                '@angular/platform-browser': 'npm:@angular/platform-browser@' + ANGULAR_VERSION + '/bundles/platform-browser.umd.js',
                '@angular/platform-browser/animations': 'npm:@angular/platform-browser@' + ANGULAR_VERSION + '/bundles/platform-browser-animations.umd.js',
                '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@' + ANGULAR_VERSION + '/bundles/platform-browser-dynamic.umd.js',
                '@angular/http': 'npm:@angular/http@' + ANGULAR_VERSION + '/bundles/http.umd.js',
                '@angular/router': 'npm:@angular/router@' + ANGULAR_VERSION + '/bundles/router.umd.js',
                '@angular/router/upgrade': 'npm:@angular/router@' + ANGULAR_VERSION + '/bundles/router-upgrade.umd.js',
                '@angular/forms': 'npm:@angular/forms@' + ANGULAR_VERSION + '/bundles/forms.umd.js',
                '@angular/upgrade': 'npm:@angular/upgrade@' + ANGULAR_VERSION + '/bundles/upgrade.umd.js',
                '@angular/upgrade/static': 'npm:@angular/upgrade@' + ANGULAR_VERSION + '/bundles/upgrade-static.umd.js',
                'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
                // material design
                '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
                '@angular/cdk/platform': 'npm:@angular/cdk/bundles/cdk-platform.umd.js',
                '@angular/cdk/bidi': 'npm:@angular/cdk/bundles/cdk-bidi.umd.js',
                '@angular/cdk/coercion': 'npm:@angular/cdk/bundles/cdk-coercion.umd.js',
                '@angular/cdk/keycodes': 'npm:@angular/cdk/bundles/cdk-keycodes.umd.js',
                '@angular/cdk/a11y': 'npm:@angular/cdk/bundles/cdk-a11y.umd.js',
                '@angular/cdk/overlay': 'npm:@angular/cdk/bundles/cdk-overlay.umd.js',
                '@angular/cdk/portal': 'npm:@angular/cdk/bundles/cdk-portal.umd.js',
                '@angular/cdk/observers': 'npm:@angular/cdk/bundles/cdk-observers.umd.js',
                '@angular/cdk/collections': 'npm:@angular/cdk/bundles/cdk-collections.umd.js',
                '@angular/cdk/accordion': 'npm:@angular/cdk/bundles/cdk-accordion.umd.js',
                '@angular/cdk/scrolling': 'npm:@angular/cdk/bundles/cdk-scrolling.umd.js',
                '@angular/cdk/layout': 'npm:@angular/cdk/bundles/cdk-layout.umd.js',
                '@angular/cdk/table': 'npm:@angular/cdk/bundles/cdk-table.umd.js',
                '@angular/cdk/stepper': 'npm:@angular/cdk/bundles/cdk-stepper.umd.js',
                // ngx bootstrap
                'ngx-bootstrap': 'npm:ngx-bootstrap@2.0.0-rc.0',
                // ng2 typeahead
                'ng2-typeahead': 'npm:ng2-typeahead@1.2.0',
                
                ts: 'npm:plugin-typescript@5.2.7/lib/plugin.js',
                tslib: 'npm:tslib@1.7.1/tslib.js',
                typescript: 'npm:typescript@2.3.2/lib/typescript.js',

                // for some of the examples
                lodash: 'npm:lodash@4.17.4/lodash.js',

                // our app is within the app folder, appLocation comes from index.html
                app: appLocation + 'app'
            },
            systemJsMap
        ),
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main.ts',
                defaultExtension: 'ts',
                meta: {
                    './*.ts': {
                        loader: boilerplatePath + 'systemjs-angular-loader.js'
                    }
                }
            },
            'ag-grid-angular': {
                main: './main.js',
                defaultExtension: 'js'
            },
            'ag-grid-enterprise': {
                main: './main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: false
            }
        }
    });
})(this);

import {Component, ViewChild, ViewContainerRef} from "@angular/core";

import {IAfterGuiAttachedParams, IDoesFilterPassParams, IFilterParams, RowNode} from "ag-grid";
import {IFilterAngularComp} from "ag-grid-angular";

@Component({
    selector: 'filter-cell',
    template: `
        <div class="container">
            EmployeeType Filter: 
            <select (ngModelChange)="onChange($event)" [ngModel]="type" class="form-control">
              <option value=""></option>
              <option value="Permanent">Permanent</option>
              <option value="Contractor">Contractor</option>
            </select>
        </div>
    `, styles: [
        `
            .container {
                border: 2px solid #22ff22;
                border-radius: 5px;
                background-color: #bbffbb;
                width: 200px;
                height: 80px
            }
            
            select {
                height: 40px
            }
        `
    ]
})
export class RecordTypeFilter implements IFilterAngularComp {
    private params: IFilterParams;
    private valueGetter: (rowNode: RowNode) => any;

    @ViewChild('select', {read: ViewContainerRef}) public select;

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

    isFilterActive(): boolean {
        return this.type !== null && this.type !== undefined && this.type !== '';
    }

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

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

    setModel(model: any): void {
        this.type = model ? model.value : '';
    }

    ngAfterViewInit(params: IAfterGuiAttachedParams): void {
        setTimeout(() => {
            //this.select.element.nativeElement.focus();
        })
    }

    // noinspection JSMethodCanBeStatic
    componentMethod(message: string): void {
        alert(`Alert from RecordTypeFilterComponent ${message}`);
    }

    onChange(newValue): void {
        if (this.type !== newValue) {
            this.type = newValue;
            this.params.filterChangedCallback();
        }
    }
}