<!DOCTYPE html>
<html>
<head>
<title>ag-Grid Using Angular Cell Filter Components</title>
<script src="https://unpkg.com/zone.js@0.6.23?main=browser"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
<script src="https://unpkg.com/systemjs@0.19.27/dist/system.src.js"></script>
<!-- ag-grid CSS -->
<link href="https://unpkg.com/ag-grid/dist/styles/ag-grid.css" rel="stylesheet"/>
<link href="https://unpkg.com/ag-grid/dist/styles/theme-fresh.css" rel="stylesheet"/>
<!-- Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function (err) { console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
(function (global) {
System.config({
transpiler: 'ts',
typescriptOptions: {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true
},
meta: {
'typescript': {
"exports": "ts"
}
},
paths: {
// paths serve as alias
'npm:': 'https://unpkg.com/'
},
map: {
'app': 'app',
// angular bundles
'@angular/core': 'npm:@angular/core@4.1.2/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common@4.1.2/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler@4.1.2/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser@4.1.2/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@4.1.2/bundles/platform-browser-dynamic.umd.js',
'@angular/router': 'npm:@angular/router@4.1.2/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms@4.1.2/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs@5.0.2',
'ts': 'npm:plugin-typescript@4.0.10/lib/plugin.js',
'typescript': 'npm:typescript@2.2.2/lib/typescript.js',
// ag libraries
'ag-grid-angular': 'npm:ag-grid-angular@10.0.0',
'ag-grid': 'npm:ag-grid@10.0.1'
},
packages: {
app: {
main: './boot.ts',
defaultExtension: 'ts'
},
'ag-grid': {
main: 'main.js'
}
}
}
);
if (!global.noBootstrap) {
bootstrap();
}
// Bootstrap the `AppModule`(skip the `app/main.ts` that normally does this)
function bootstrap() {
// Stub out `app/main.ts` so System.import('app') doesn't fail if called in the index.html
System.set(System.normalizeSync('app/boot.ts'), System.newModule({}));
// bootstrap and launch the app (equivalent to standard main.ts)
Promise.all([
System.import('@angular/platform-browser-dynamic'),
System.import('app/app.module')
])
.then(function (imports) {
var platform = imports[0];
var app = imports[1];
platform.platformBrowserDynamic().bootstrapModule(app.AppModule);
})
.catch(function (err) {
console.error(err);
});
}
})(this);
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'my-app',
templateUrl: 'app.component.html'
})
export class AppComponent { }
<ag-filter-component></ag-filter-component>
import {NgModule} from "@angular/core";
import {BrowserModule} from "@angular/platform-browser";
import {FormsModule} from "@angular/forms";
// ag-grid
import {AgGridModule} from "ag-grid-angular/main";
// application
import {AppComponent} from "./app.component";
// filter
import {FilterComponentComponent} from "./filter-component-example/filter.component";
import {PartialMatchFilterComponent} from "./filter-component-example/partial-match-filter.component";
@NgModule({
imports: [
BrowserModule,
FormsModule,
AgGridModule.withComponents(
[
PartialMatchFilterComponent
])
],
declarations: [
AppComponent,
FilterComponentComponent,
PartialMatchFilterComponent
],
bootstrap: [AppComponent]
})
export class AppModule {
}
import {Component} from '@angular/core';
import {GridOptions} from 'ag-grid/main';
import {PartialMatchFilterComponent} from "./partial-match-filter.component";
@Component({
moduleId: module.id,
selector: 'ag-filter-component',
templateUrl: 'filter.component.html'
})
export class FilterComponentComponent {
public gridOptions: GridOptions;
constructor() {
this.gridOptions = <GridOptions>{};
this.gridOptions.rowData = this.createRowData();
this.gridOptions.columnDefs = this.createColumnDefs();
this.gridOptions.enableFilter = true;
this.gridOptions.suppressMenuColumnPanel = true; // ag-enterprise only
this.gridOptions.suppressMenuMainPanel = true; // ag-enterprise only
this.gridOptions.floatingFilter=true;
}
onClicked(event): void {
this.gridOptions.api.getFilterInstance("name").getFrameworkComponentInstance().componentMethod("Hello World!");
}
private createColumnDefs() {
return [
{headerName: "Row", field: "row", width: 400},
{
headerName: "Filter Component",
field: "name",
filterFramework: PartialMatchFilterComponent,
width: 400
}
];
}
private createRowData() {
return [
{"row": "Row 1", "name": "Michael Phelps"},
{"row": "Row 2", "name": "Natalie Coughlin"},
{"row": "Row 3", "name": "Aleksey Nemov"},
{"row": "Row 4", "name": "Alicia Coutts"},
{"row": "Row 5", "name": "Missy Franklin"},
{"row": "Row 6", "name": "Ryan Lochte"},
{"row": "Row 7", "name": "Allison Schmitt"},
{"row": "Row 8", "name": "Natalie Coughlin"},
{"row": "Row 9", "name": "Ian Thorpe"},
{"row": "Row 10", "name": "Bob Mill"},
{"row": "Row 11", "name": "Willy Walsh"},
{"row": "Row 12", "name": "Sarah McCoy"},
{"row": "Row 13", "name": "Jane Jack"},
{"row": "Row 14", "name": "Tina Wills"}
];
}
}
<div style="width: 800px;">
<h2 style="margin-bottom:5px">Filter Component Example</h2>
<button style="margin-bottom: 10px" (click)="onClicked($event)">Filter Instance Method</button>
<ag-grid-angular #agGrid style="width: 100%; height: 350px;" class="ag-fresh"
[gridOptions]="gridOptions">
</ag-grid-angular>
</div>
import {Component, ViewChild, ViewContainerRef} from '@angular/core';
import {IFilterParams, IDoesFilterPassParams, RowNode, IAfterGuiAttachedParams} from 'ag-grid/main';
import {IFilterAngularComp, IFloatingFilterComp} from 'ag-grid-angular/main';
@Component({
selector: 'filter-cell',
template: `
Filter: <input style="height: 20px" #input (ngModelChange)="onChange($event)" [ngModel]="text">
`
})
export class PartialMatchFilterComponent 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.value;
}
afterGuiAttached(params: IAfterGuiAttachedParams): void {
this.input.element.nativeElement.focus();
}
componentMethod(message: string): void {
alert(`Alert from PartialMatchFilterComponent ${message}`);
}
onChange(newValue): void {
if (this.text !== newValue) {
this.text = newValue;
this.params.filterChangedCallback();
}
}
}
@Component({
selector: 'number-f-filter-cell',
template: `
<input type="text"
class="form-control filter-input"
[ngModel]="currentValue"
(ngModelChange)="onInputBoxChanged($event)"
>
`,
})
export class PartialMatchFloatingFilterComponent implements IFloatingFilterComp {
private onFloatingFilterChanged: (change: (any | any)) => void;
private currentValue: any;
private params: IFloatingFilterParams<any, any>;
agInit(params: IFloatingFilterParams<any, any>): void {
this.params = params;
this.onFloatingFilterChanged = params.onFloatingFilterChanged;
this.currentValue = null;
};
onInputBoxChanged(newValue) {
if (newValue === ''){
this.onFloatingFilterChanged(null);
return;
}
this.currentValue = Number(newValue);
this.onFloatingFilterChanged(this.currentValue);
}
onParentModelChanged(parentModel) {
this.currentValue = parentModel;
this.params.onFloatingFilterChanged(this.currentValue);
};
}