Setting up the ag-grid initialization directly from the HTML using an onGridReady method in the component file.
<div style="flex-grow:1;">
<ag-grid-angular
style="float:left;width: 100%; height: 201px;margin-top:10px;"
class="ag-theme-balham"
[gridOptions]="gridOptions"
[columnDefs]="columnDefs"
(gridReady)="onGridReady($event)"
[rowData]="rowData"
#grid
>
</ag-grid-angular>
</div>
In the corresponding .ts file, the onGridReady function is handled as follows:
onGridReady(params?: any) {
console.log("onGridReady");
var datasource = {
getRows: (params: IGetRowsParams) => {
this.info = "Getting datasource rows, start: " + params.startRow + ", end: " + params.endRow;
console.log(this.info);
this.getRowData().then(data => {
if (this.stopApiCalls) {
var lastRow = this.allTableData.length;
params.successCallback(data, lastRow)
}
else {
params.successCallback(data)
}
})
}
};
console.log(">>",datasource);
params.api.setDatasource(datasource);
}
The this.getRowData function retrieves data from the backend service using HTTP.
Now, there is a need to reinitialize and trigger the onGridReady event based on a specific action taken in another component file. While methods in the ag-grid component can be accessed, the question arises on how to invoke the onGridReady event from this external component.