How to render multiple ag-grid in single component using Angular 6

Question

I have multiple ag-grid in html page, I want get the specific row values of an ag-grid in component.

html

 <ag-grid-angular #agGrid1 style="width: 1250px; margin-left: 5px ; height:120px;background-color: #CFD8DC;"
    class="ag-theme-balham" [rowData]="rowsData1" [columnDefs]="cols" rowSelection="multiple"
    [enableCellChangeFlash]="true">
  </ag-grid-angular>

 <ag-grid-angular #agGrid2 style="width: 1250px; margin-left: 5px ; height:120px;background-color: #CFD8DC;"
    class="ag-theme-balham" [rowData]="rowsData2" [columnDefs]="cols2" rowSelection="multiple"
    [enableCellChangeFlash]="true">
  </ag-grid-angular>

component.ts

  @ViewChild('agGrid1', { static: true }) agGrid: AgGridAngular;
  @ViewChild('agGrid2', { static: true }) agGrid2: AgGridAngular;

  getRowsData() {

      this.selectedRows1 = this.agGrid.api.getSelectedRows();
      this.selectedRows2 = this.agGrid2.api.getSelectedRows();
     console.log( this.selectedRows1,  this.selectedRows2)

  }  

Here I am trying to get the values of both ag-grid rows, but I am getting:

ERROR TypeError: Cannot read property 'api' of undefined error.

Answer 1

Done Ag-Grid setUp

And I have tried with below code , Bind grid Proper way

In your HTML File

<ag-grid-angular style="width: 500px; height: 500px;" class="ag-theme-balham" [rowData]="rowData"
    [columnDefs]="columnDefs" [rowSelection]="rowSelection" (selectionChanged)="onSelectionChanged($event)"
          (gridReady)="onGridReady($event)"
>
</ag-grid-angular>

<ag-grid-angular style="width: 500px; height: 500px;" class="ag-theme-balham" [rowData]="rowData"
    [columnDefs]="columnDefs" [rowSelection]="rowSelection" (selectionChanged)="onSelectionChanged($event)"
          (gridReady)="onGridReady1($event)"
>
</ag-grid-angular>

and In app.component.ts file

private gridApi;
  private gridColumnApi;
  private gridApi1;
  private gridColumnApi1;
  rowSelection = "single";
  columnDefs = [
    { headerName: "Make", field: "make" },
    { headerName: "Model", field: "model" },
    { headerName: "Price", field: "price" }
  ];
  rowData = [
    { make: "Toyota", model: "Celica", price: 35000 },
    { make: "Ford", model: "Mondeo", price: 32000 },
    { make: "Porsche", model: "Boxter", price: 72000 }
  ];
  onSelectionChanged() {
    var selectedRows = this.gridApi.getSelectedRows();
    var selectedRows1 = this.gridApi1.getSelectedRows();
    console.log(selectedRows);
    console.log(selectedRows1);
  }
  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
  }
  onGridReady1(params) {
    this.gridApi1 = params.api;
    this.gridColumnApi1 = params.columnApi;
  }

I am a able to get both value of grid in onSelectionChanged() method

Here is the output screen

Hope this will help you

let me know if you have any issue with above

thanks