I have a situation in ag-grid where I need to update the icon of a button in a cell when it is clicked to indicate progress and then revert back to its original state upon completion of the action.
Below is the code snippet:
my-custom.component.ts
<ColDef>{
headerName: 'Export',
width: 40,
height: 80,
cellRendererFramework: ButtonCellRendererComponent,
cellRendererParams: {
isLoading: false,
onClick: this.onExportButtonClicked.bind(this),
}
}
onExportButtonClicked(cell) {
this.customService.downloadData(cell.rowData)
.subscribe(data => {console.log("success")},
(error) => { console.log("there was an error") },
() => {
console.log("complete function triggered");
});
}
template: `<button class="unstyled-button" (click)="onClick($event)">
<span *ngIf="!isLoading">
<i class="fas fa-file-pdf"></i>
</span>
<span *ngIf="isLoading">
<i class="fas fa-spinner fa-spin"></i>
</span>
</button>`,
export class ButtonCellRendererComponent implements ICellRendererAngularComp {
public isLoading: boolean;
private params: any;
agInit(params: any): void {
this.params = params;
this.isLoading = this.params.isLoading;
}
refresh(params: any): boolean {
return false;
}
onClick($event) {
if (this.params.onClick instanceof Function) {
const params = {
event: $event,
data: this.params.node.data,
isLoading: this.isLoading
}
this.params.onClick(params)
}
}
What is the best way to toggle the isLoading variable in this scenario? Can I add a callback function to the button click event?