title: How to create a mat-progress bar after showing a dialog box
body: <p>I have a page in which I have a Run button.If I click on Run button a dialog box appears with two options Yes and No.If a user clicks Yes I want to display a mat-progress bar.
  I am confused as to where to write the html code of mat-progress bar and where to call it from. </p>
  
  <p>HTML Code:</p>
  
  <pre><code>&lt;mat-toolbar&gt;
                          &lt;div class="col-md-offset-11"&gt;
                              &lt;button
                                  mat-raised-button
                                  mat-hint="Execute Query on Whole DataSet"
                                  color="primary"
                                  (click)="executeOnFullData()"
                              &gt;
                                  Run
                              &lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/mat-toolbar&gt;
  </code></pre>
  
  <p>TypeScript Code:</p>
  
  <pre><code>    executeOnFullData() {
      const dialogRef = this.dialog.open(ConfirmJobRunComponent, {
      });
  
      dialogRef.afterClosed()
  }
  </code></pre>
  
  <p>HTML Code for dialogBox: </p>
  
  <pre><code>&lt;div class="card"&gt;
  &lt;div class="card-header"&gt;&lt;h5 class="title"&gt;Confirm&lt;/h5&gt;&lt;/div&gt;
  &lt;div class="content"&gt;
      &lt;h3 mat-dialog-title&gt;
          Are you sure you want to run Recommendation Settings on the entire
          Dataset?
      &lt;/h3&gt;
  
      &lt;div mat-dialog-actions&gt;
          &lt;button
              mat-button
              [mat-dialog-close]="true"
              (click)="confirmSelection()"
          &gt;
              Yes
          &lt;/button&gt;
          &lt;button mat-button (click)="onNoClick()"&gt;
              Cancel
          &lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Typescript Code for DialogComponent</p>
  
  <pre><code>import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material";
  import { Component, Inject } from "@angular/core";
  import { RecommendationService } from "../../recommendation- 
  service.service";
  
  @Component({
  selector: "app-confirm-job-run",
  templateUrl: "./confirm-job-run.component.html",
  styleUrls: ["./confirm-job-run.component.scss"]
  })
  export class ConfirmJobRunComponent {
  constructor(
      public dialogRef: MatDialogRef&lt;ConfirmJobRunComponent&gt;,
      @Inject(MAT_DIALOG_DATA) public data: any,
      public dataService: RecommendationService
  ) {}
  
  onNoClick(): void {
      this.dialogRef.close();
  }
  
  confirmSelection(): void {}
  }
  </code></pre>