Mat Progress Bar for Fetch API and XLS File Creation

Question

I want to see the mat progress bar to determine how much progress has been made. Progress is determined by simultaneously tracking how much data is fetched from the database and how much of the XLSX file has been created. It doesn't need to be accurate. A rough estimate and abrupt changes in progress are acceptable. Is it possible to do this?

For now I have used mat-spinner. But I want to use <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/`);
}

Answer 1

I assume that getResponseCodeReportData is a function that download a file, and you want to show the download advancement. You need to add reportProgress: true and observe: 'events' to the options of your get request. Then you can see the progress when HttpEvent type is DownloadProgress.

You will find an example here: https://www.c-sharpcorner.com/article/how-to-create-a-download-progress-bar-with-angular-and-material-design/