Angular 6 Loadingbar With DialogBox

Question

I've been using angular with material, and I want to have the 'mat-progress-bar' show when I press 'Add' on my dialogbox I've made a small app on StackBlitz which might make it easier to understand.

https://stackblitz.com/edit/angular-eqxkbm

dialog-overview-example.html

 <div *ngIf="LoadingCondition; then LoadingBlock"></div>
  <ng-template #LoadingBlock><mat-progress-bar mode="indeterminate"></mat-progress-bar></ng-template>
  <br>

  My list list here

  <br>
  <br>


    <button mat-raised-button (click)="openDialog()">Add</button>

dialog-overview-example.ts

import {Component, Inject} from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';

export interface DialogData {
  animal: string;
  name: string;
}

@Component({
  selector: 'dialog-overview-example',
  templateUrl: 'dialog-overview-example.html',
  styleUrls: ['dialog-overview-example.css'],
})
export class DialogOverviewExample {

public LoadingCondition = false;

  animal: string;
  name: string;

  constructor(public dialog: MatDialog) {}

  openDialog(): void {
    const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: '250px',
      data: {name: this.name, animal: this.animal}
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
      this.animal = result;
    });
  }

}

@Component({
  selector: 'dialog-overview-example-dialog',
  templateUrl: 'dialog-overview-example-dialog.html',
})
export class DialogOverviewExampleDialog {

  constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData, private DialogOverviewExample : DialogOverviewExample) {}

  onNoClick(): void {
    this.dialogRef.close();
  }

  onAddClick() :void{
    this.DialogOverviewExample.LoadingCondition = true;
    //makes a call to my service
    //I want to start loading here
    //but does not work
    this.dialogRef.close();
  }

}

dialog-overview-example-dialog.html

<h1 mat-dialog-title>Stuff to add</h1>
<div mat-dialog-content>
  <p>add what?</p>
  <mat-form-field>
    <input matInput [(ngModel)]="data.animal">
  </mat-form-field>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()">No Click</button>
  <button mat-button (click)="onAddClick()" cdkFocusInitial>add</button>
</div>

TLDR; When I press 'onAddClick()' the the loading bar does not show

Edric Edric · Accepted Answer · 2018-10-03T10:33:23

Please consider handling operations that are occurring right after the dialog is closed in the class which the dialog opened from.

In other words, consider handling the progress bar functionality in the component that has opened the dialog. The way you're doing it doesn't work as you don't have an instance of that class and thus your code won't actually do what you think it will do.

Anyways, you can pass an optional result either with the matDialogClose attribute in your dialog's template which is set to a string or via the dialog reference's close method with the parameter set as the result. You can then handle the dialog's result via the afterClosed observable from the dialog's reference.

Here's an example:

<h2 matDialogTitle>Discard changes?</h2>
<mat-dialog-content>
  <p>Unsaved changes will be lost!</p>
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-button color="primary" matDialogClose="cancel">Cancel</button>
  <button mat-button color="primary" matDialogClose="discard">Discard changes</button>
</mat-dialog-actions>

export class MyComponent {
  constructor(private dialog: MatDialog) { }
  onDelete() {
    const dialogRef = this.dialog.open(DiscardChangesDialogComponent);
    dialogRef.afterClosed().subscribe(result => {
      // Note: If the user clicks outside the dialog, the result
      // will be returned as `undefined`
      if (result !== undefined) {
        // Note: If you set the attribute of `matDialogClose` to something
        // else, please modify the following if statement below to suit
        // your needs.
        if (result === 'cancel') {
          // TODO: Implement functionality here.
        } else if (result === 'discard') {
          // TODO: Implement functionality
        }
      }
    })
  }

Alternative method (using methods instead of the matDialogClose attribute):

IMO, I suggest that you use the first method as this requires a few more lines for handling the buttons in the dialog template.

Using the matDialogClose property reduces the number of lines as you no longer have to write click handlers for the buttons in your dialog's component.

Anyways, here's the code:

Dialog template:

<h2 matDialogTitle>Delete all conversations?</h2>
<mat-dialog-content>
  <p>This cannot be undone!</p>
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-button color="primary" (click)="onCancelClick()">Cancel</button>
  <button mat-button color="warn" (click)="onConfirmClick()">Confirm</button>

Dialog's component:

export class MyDialogComponent {
  // ...
  constructor(private dialogRef: MatDialogRef<MyDialogComponent>) { }

  onCancelClick() {
    this.dialogRef.close('cancel');
  }
  onConfirmClick() {
    this.dialogRef.close('confirm');
  }
}

Component (that opens the dialog):

Same as the above example, except replace discard with confirm in the else if condition

Hope this helps!

Angular 6 Loadingbar With DialogBox

1 Answers