title: Ag-Grid require delete button for each row
body: <p>I am trying to implement a solution with ag-grid and not got stuck into a problem. I am trying to implement edit and delete button in each row .edit button implementation is successful but problem is with delete button. I have tried best of my knowledge (which is little for angular 2) .Please see the implementation as per below code:- </p>
  
  <p>court.component.ts</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { Court } from './court.model';
  //import './../utils/array.extensions';
  
  import { GridOptions } from "ag-grid";
  import { DataCourtService } from '../services/data-court.service';
  import { EditButtonComponent } from "../utils/editbutton.component";
  
   @Component({
       selector: 'court',
      template: require('./court.component.html'),
      providers: [DataCourtService]
  })
  
  export class CourtComponent {
     private gridOptions: GridOptions;
     public courts : Court[];
     onQuickFilterChanged(event: any) {
      this.gridOptions.api.setQuickFilter(event.target.value);
     }
      constructor() {
          var courtservice = new DataCourtService();
          this.gridOptions = {
              rowSelection: 'single'
          };
  
        //   this.gridOptions.angularCompileRows = true;
          this.gridOptions.columnDefs = [
  
              {
                  headerName: "Court Name",
                  field: "courtname",                
                  editable: true   
              } ,
              {
                  headerName: "Action",
                  cellRendererFramework: EditButtonComponent,
                  colId: "edit"
              }
  
          ];
  
          this.gridOptions.rowData = courtservice.getCourt();
  
      }
  }
  </code></pre>
  
  <p>EditButton.component.ts</p>
  
  <pre><code>import {Component} from "@angular/core";
  import {ICellRendererAngularComp} from "ag-grid-angular/main";
  
  @Component({
      selector: 'edit-button',
      template: `&lt;button (click)="invokeEditMethod()" class="btn btn-primary btn-xs"&gt;&lt;span class="glyphicon glyphicon-edit"&gt;&lt;/span&gt;Edit&lt;/button&gt;
                 &lt;button (click)="invokeDeleteMethod()" class="btn btn-danger btn-xs"&gt;&lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt;Delete&lt;/button&gt;`
  })
  export class EditButtonComponent implements ICellRendererAngularComp {
      public params: any;
  
      agInit(params: any): void {
          this.params = params;
      }
  public invokeDeleteMethod() {
         var selectedData = this.params.api.getSelectedRows();
         this.params.api.updateRowsData({remove: selectedData});          
       alert("hi");
  
  }
      public invokeEditMethod() {
  
  
           this.params.api.setFocusedCell(this.params.node.rowIndex, 'courtname');
           this.params.api.startEditingCell({
           rowIndex: this.params.node.rowIndex,
          colKey: 'courtname',
          }
       );
      }
  
  }
  </code></pre>
  
  <p>In this function </p>
  
  <pre><code>public invokeDeleteMethod() {
             var selectedData = this.params.api.getSelectedRows();
             this.params.api.updateRowsData({remove: selectedData});          
           alert("hi");
  
      }
  </code></pre>
  
  <p>I am recieving an error as UpdateRowData is not an function. Can you please help me to achieve this??</p>