How To Create A Download Progress Bar With Angular And Material Design

To create a download progress bar with a percentage in Angular, you can use the HttpClient module to request a server and track the download's progress. Here is an example of how this can be done,

  1. First, install the @angular/material and @angular/cdk packages in your Angular project:
    npm install @angular/material @angular/cdk
  2. Import the MatProgressBarModule and MatProgressSpinnerModule modules from the @angular/material package in your Angular module:
    import { MatProgressBarModule, MatProgressSpinnerModule } from '@angular/material';
      imports: [
      // ...
    export class AppModule { }
  3. Now, import the HttpClient module and the HttpEventType enum from the @angular/common/http package:
    import { HttpClient, HttpEventType } from '@angular/common/http';
  4. Inject the HttpClient service into your component or service using the constructor:
    constructor(private http: HttpClient) {}
  5. Create a function to make the download request and track the progress:
    public percentDone: number = 0;
    public downloadFile() {
      this.http.get('', { responseType: 'blob' })
        .subscribe(event => {
          if (event.type === HttpEventType.DownloadProgress) {
            // Update the progress bar with the download percentage
            const this.percentDone = Math.round(100 * event.loaded /;
            console.log(`Downloaded ${this.percentDone}%`);
          } else if (event.type === HttpEventType.Response) {
            // Save the downloaded file
            const file = new Blob([event.body], { type: 'application/zip' });
            const fileURL = URL.createObjectURL(file);
  6. In your component's template, use the mat-progress-bar and mat-progress-spinner components to display the progress bar and percentage:
    <mat-progress-bar mode="determinate" [value]="percentDone"></mat-progress-bar>
    <mat-progress-spinner mode="determinate" [value]="percentDone"></mat-progress-spinner>
  7. You can use the percentDone property to bind to the value attribute of the mat-progress-bar and mat-progress-spinner components, as well as to display the percentage as text.

This is an example of how you can create a material design download progress bar with a percentage in Angular. You can customize the appearance and behaviour of the progress bar and percentage by using the various options and styles available for the mat-progress-bar and mat-progress-spinner components.