Angular Material 2 Progress Bar Overlay

Question

I want to show a Progress Bar overlay while some processing takes place. I can calculate the percent complete so I want to use a determinate progress bar. For the overlay part, I want to use a dialog. Basically, I want to do exactly what is done here (Angular 2 Material Progress Spinner: display as overlay) except I do not want a Spinner. So my component will look like:

Template:

<mat-progress-bar mode="determinate" [value]="percent"></mat-progress-bar>

Component:

import {Component, Input} from '@angular/core';
@Component({
  selector: 'progress-bar',
  templateUrl: 'progress-bar.html'
})
export class ProgressBarComponent {
  @Input() percent: number;
  constructor() {}
}

And then my code that uses this component is like this:

const dialogRef: MatDialogRef<ProgressBarComponent> = this.dialog.open(ProgressBarComponent, {
  panelClass: 'transparent',
  disableClose: true
});

for (let i = 0; i < this.thingsToProcess.length; i++) {
  percentDone = i / this.thingsToProcess.length;
  // todo: Update dialogRef.ProgressBarComponent.percent
  await this.myService.doProcessing(this.thingsToProcess[i]);
}

My question is how can I bind to the "percent" value that is on the ProgressBarComponent class?

I found this (How to pass data to dialog of angular material 2) but it seems like it is only for constructor injection and not binding.

Haijin · Accepted Answer · 2019-02-19T05:45:18.680

I gave it a try here: https://stackblitz.com/edit/angular7-material-primeng-template-b4dvs8

The idea is still using constructor injection, but the value passed is a reference to a object, not a static value. you define a percent object in your main component:

 percent = {percent: 10};

you pass it to the dialog like:

this.dialog.open(ProgressbarComponent, {
      panelClass: 'transparent',
      disableClose: true,
      data:{percent: this.percent}
    });

you can then bind to this input object like:

<mat-progress-bar mode="determinate" [value]="data.percent.percent"></mat-progress-bar>

In the main component you can modify the value, and it will be reflected in the progress bar. I set a timer to change the progress bar value from 10 to 50 for demo purpose here.

Also you can use a common service to pass the value.

Angular Material 2 Progress Bar Overlay

1 Answers1