I am interested in implementing a mat progress bar to track the progress made while fetching data from the database and creating an XLSX file. The progress does not need to be exact, rough estimates and sudden changes are acceptable. Is it feasible to achieve this?
Currently, I have been using mat-spinner but I would like to switch to
<mat-progress-bar mode="determinate"></mat-progress-bar>report.ts
export_to_excel() {
this.downloadSpinner = true;
this.reportService.getResponseCodeReportData()
.subscribe({
next: data => {
if (data.length != 0) {
let XlsMasterData = data
const workSheet = XLSX.utils.json_to_sheet(XlsMasterData);
const workBook: XLSX.WorkBook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workBook, workSheet, 'SheetName');
XLSX.writeFile(workBook, 'response_code.xlsx');
} else {
this.showSwalmessage("No record Found!", "", "warning", true);
}
},
error: (error: any) => {
this.showSwalmessage("Something Went wrong", error, "warning", true);
},
complete: () => {
this.downloadSpinner = false;
}
}
);
}
report.html
<div class="body" style="text-align: center;">
<div class="button-demo">
<button class="btn btn-primary btn-border-radius waves-effect" tabindex="0" aria-controls="example1" type="button" (click)="export_to_excel()" mat-raised-button color="primary" style="width: 120px;">
<div style="display: flex; align-items: center; justify-content: center;">
<mat-spinner [diameter]="20" *ngIf="downloadSpinner"></mat-spinner>
<div style="min-width: 80px;">Download</div>
</div>
</button>
</div>
</div>
service.ts
getResponseCodeReportData(){
return this.http.get<any[]>(`${environment.apiUrl}/responsecode-report/`);
}