Angular AG Grid

toperbermudez

The code above has an ag-grid-angular element with the following attributes:

style="height: 25rem"

class="ag-theme-balham"

[columnDefs]="gridOptions.columnDefs"

[defaultColDef]="gridOptions.defaultColDef"

[rowData]="data"

[rowSelection]="'multiple'"

[animateRows]="true"

[enableCellTextSelection]="true"

[overlayLoadingTemplate]="loadingOverlay"

[overlayNoRowsTemplate]="noRowsOverlay"

(gridReady)="gridOptions.onGridReady($event)"

(cellClicked)="gridOptions.onCellClicked($event)"

[quickFilterText]="searchKey"

</ag-grid-angular>

The code above has two inputs, searchKey and quickFilterText, both of which are of type text. The code also has a p element with the text-muted class. When the user clicks on either of the inputs, the code will invoke the gridOptions.onGridReady()


<div class="row mb-1 d-flex justify-content-end">
  <div class="col-md-3">
    <input type="text" class="form-control form-control-sm" [(ngModel)]="searchKey" placeholder="Quick search.." [disabled]="loading">
  </div>
</div>

<ag-grid-angular
  style="height: 25rem"
  class="ag-theme-balham"
  [columnDefs]="gridOptions.columnDefs"   
  [defaultColDef]="gridOptions.defaultColDef"
  [rowData]="data"
  [rowSelection]="'multiple'"
  [animateRows]="true"
  [enableCellTextSelection]="true"
  [overlayLoadingTemplate]="loadingOverlay"
  [overlayNoRowsTemplate]="noRowsOverlay"
  (gridReady)="gridOptions.onGridReady($event)"
  (cellClicked)="gridOptions.onCellClicked($event)"
  [quickFilterText]="searchKey"
  ></ag-grid-angular>
<p class="text-muted mt-2">Result: {{ dataCount | number}}</p>