agGrid searching data using angular2 and typescript
<p>How can I set filtering in my agGrid component.
I saw a example from agGrid but it is written in javascript. 
<a href="https://www.ag-grid.com/angular-grid-filtering/index.php" rel="noreferrer">https://www.ag-grid.com/angular-grid-filtering/index.php</a></p>

<p>But it seems I can't make this one work using my ts code below.</p>

<p>agGrid.component.ts </p>

<pre><code>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" }
    ];
    // put 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='';

}
</code></pre>

<p>grid.html</p>

<p></p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input placeholder="Filter..." type="text"
    [value]="searchValue"
    (input)="searchValue = $event.target.value"
/&gt;

&lt;ag-grid-ng2
  class="ag-fresh"
  enable-sorting
  enable-filter
  style="height: 300px" 
  [gridOptions]="gridOptions" 
  (cellClicked)="onCellClicked()" 
  [columnDefs]="columnDefs"
  [rowData] = "rowData"&gt; 
&lt;/ag-grid-ng2&gt;</code></pre>
</div>
</div>
</p>