title: Angular2 ag-grid datasource
body: <p>I am trying to get a ag-grid datasource to work in angular2, although I got the feeling that I am nearly there I am not able to fix the following issue with my current knowledge of angular/typescript.</p>
  
  <p>The problem is that I have a function called returnRows, which works perfectly fine (see testdata variable). But the moment I try to call it within datasource.getRows I get the following exception: TypeError: this.returnRows is not a function in [gridOptions in PagetestComponent@2:2]. In the end I would like to replace the function with a service that gets the data from an api. </p>
  
  <p>Here is my component.ts code:</p>
  
  <pre><code>import {Component, OnInit} from 'angular2/core';
  import {RouteParams} from 'angular2/router';
  
  import {AgGridNg2} from 'ag-grid-ng2/main';
  import {GridOptions} from 'ag-grid/main';
  
  import {PagetestService} from '..//services/pagetest.service';
  
  @Component({
    selector: 'sample',
    templateUrl:'/static/app/pagetest/components/pagetest.component.html',
    directives: [AgGridNg2],
    providers: [PagetestService]
  })
  
  export class PagetestComponent implements OnInit{
      public gridOptions: GridOptions;
      private columnDefs: any[];
      private testdata: any[];
  
      constructor(
          public _routeParams: RouteParams,
          public _variantsService: PagetestService) {
      }
  
      ngOnInit(){
          this.columnDefs = [
            {headerName: "ID", field: "_id",},
            {headerName: "CHR", field: "chr"},
            {headerName: "POS", field: "pos"},
            {headerName: "REF", field: "ref"},
            {headerName: "ALT", field: "alt"},
          ];
          this.gridOptions = &lt;GridOptions&gt;{};
          this.gridOptions.datasource = this.dataSource;
          this.testdata = this.returnRows();
      }
  
      dataSource = {
          //rowCount : -1,
          pageSize: 1,
          overflowSize: 100,
  
          getRows: function(params: any){
              console.log(params)
              //var rowData = [
                  //{"chr": "1", "_id": "1-22848972-A-C", "ref": "A", "pos": 22848972, "alt": "C"},
                  //{"chr": "1", "_id": "1-33133968-T-C", "ref": "T", "pos": 33133968, "alt": "C"}
              //]
              rowData = this.returnRows();
              var rowsThisPage = rowData.slice(params.startRow, params.endRow);
              console.log(rowsThisPage)
              var lastRow = -1;
              params.successCallback(rowsThisPage, lastRow);
          }
      }
  
      returnRows(){
          var rowData = [
              {"chr": "1", "_id": "1-22848972-A-C", "ref": "A", "pos": 22848972, "alt": "C"},
              {"chr": "1", "_id": "1-33133968-T-C", "ref": "T", "pos": 33133968, "alt": "C"}
          ]
          return rowData
      }
  }
  </code></pre>
  
  <p>Update, thanks @Dinistro for answering my initial question.</p>
  
  <p>Updated code (partial):</p>
  
  <pre><code>getRows: (params: any) =&gt; {
      var rowData = this.returnRows();
      var rowsThisPage = rowData.slice(params.startRow, params.endRow);
      var lastRow = -1;
      //if (rowData.length &lt;= params.endRow) {
          //lastRow = rowData.length;
      //}
      // call the success callback
      params.successCallback(rowsThisPage, lastRow);
  }
  </code></pre>
  
  <p>And added service to returnRows function.</p>
  
  <pre><code>returnRows() {
      var rowData: any;
      this._variantsService.getVariants().subscribe(
          variants =&gt; rowData = variants
      );
      console.log(rowData)
      return rowData;
  }
  </code></pre>
  
  <p>This how ever results now in the error: TypeError: rowData is undefined in [gridOptions in PagetestComponent@2:2]. Probably a similar mistake but I can't get it to work.</p>
  
  <p>pagetest.component.html</p>
  
  <pre><code>&lt;h1&gt;Pagetest&lt;/h1&gt;
  &lt;ag-grid-ng2 #agGrid style="width: 100%; height: 350px;" class="ag-fresh"
    [gridOptions]="gridOptions"
    [columnDefs]="columnDefs"
  
    rowModelType = "pagination"
  
    enableColResize&gt;
  &lt;/ag-grid-ng2&gt;
  </code></pre>
  
  <p>pagetest.service.ts</p>
  
  <pre><code>import {Injectable} from 'angular2/core';
  import {Http, Response} from 'angular2/http';
  import {Observable} from 'rxjs/Observable';
  
  @Injectable()
  export class PagetestService {
    constructor (private http: Http) {}
  
    private _variantsUrl = '/api/variant/';  // URL to web api
  
    getVariants () {
      return this.http.get(this._variantsUrl)
                      .map(res =&gt; res.json())
                      .catch(this.handleError);
    }
    private handleError (error: Response) {
      console.error(error);
      return Observable.throw(error.json().error || 'Server error');
    }
  
  }
  </code></pre>