title: Angular Material 2 Progress Bar Overlay
body: <p>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 (<a href="https://stackoverflow.com/questions/42963444/angular-2-material-progress-spinner-display-as-overlay">Angular 2 Material Progress Spinner: display as overlay</a>) except I do not want a Spinner. So my component will look like:</p>
  
  <p>Template:</p>
  
  <pre><code>&lt;mat-progress-bar mode="determinate" [value]="percent"&gt;&lt;/mat-progress-bar&gt;
  </code></pre>
  
  <p>Component: </p>
  
  <pre><code>import {Component, Input} from '@angular/core';
  @Component({
    selector: 'progress-bar',
    templateUrl: 'progress-bar.html'
  })
  export class ProgressBarComponent {
    @Input() percent: number;
    constructor() {}
  }
  </code></pre>
  
  <p>And then my code that uses this component is like this:</p>
  
  <pre><code>const dialogRef: MatDialogRef&lt;ProgressBarComponent&gt; = this.dialog.open(ProgressBarComponent, {
    panelClass: 'transparent',
    disableClose: true
  });
  
  for (let i = 0; i &lt; this.thingsToProcess.length; i++) {
    percentDone = i / this.thingsToProcess.length;
    // todo: Update dialogRef.ProgressBarComponent.percent
    await this.myService.doProcessing(this.thingsToProcess[i]);
  }
  </code></pre>
  
  <p>My question is how can I bind to the "percent" value that is on the ProgressBarComponent class? </p>
  
  <p>I found this (<a href="https://stackoverflow.com/questions/42664974/how-to-pass-data-to-dialog-of-angular-material-2">How to pass data to dialog of angular material 2</a>) but it seems like it is only for constructor injection and not binding.</p>