How do I implement filtering in my agGrid component? I came across an example from agGrid, but it's written in JavaScript. https://www.ag-grid.com/angular-grid-filtering/index.php
However, I'm having trouble getting it to work with my TypeScript code below.
agGrid.component.ts
import {Component} from 'angular2/core';
import {AgGridNg2} from 'ag-grid-ng2/main';
import {GridOptions} from 'ag-grid/main';
import 'ag-grid-enterprise/main';
@Component({
selector: 'app',
templateUrl: 'app/partials/agGrid/agGrid.html',
directives: [AgGridNg2]
})
export class AgGridComponent {
columnDefs = [
{ headerName: "Contact Name", field: "make" },
{ headerName: "Company Name", field: "model" },
{
headerName: "Last Event",
field: "price",
cellClass: 'rightJustify',
cellRenderer: function (params: any) {
return '$' + params.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); //thanks http://stackoverflow.com/users/28324/elias-zamaria
}
},
{ headerName: "Contact Email", field: "model" },
{ headerName: "Work Phone", field: "model" }
];
// assign data directly onto the controller
rowData = [
{ make: "Toyota", model: "Celica", price: 35000 },
{ make: "Ford", model: "Mondeo", price: 32000 },
{ make: "Porsche", model: "Boxter", price: 72000 }
];
gridOptions = {
columnDefs: this.columnDefs,
rowData: null,
enableFilter: true
};
values='';
onKey(event:any) {
this.values = event.target.value;
this.gridOptions.columnDefs.setQuickFilter(this.values);
}
searchValue='';
}
grid.html
<input placeholder="Filter..." type="text"
[value]="searchValue"
(input)="searchValue = $event.target.value"
/>
<ag-grid-ng2
class="ag-fresh"
enable-sorting
enable-filter
style="height: 300px"
[gridOptions]="gridOptions"
(cellClicked)="onCellClicked()"
[columnDefs]="columnDefs"
[rowData] = "rowData">
</ag-grid-ng2>