Как создать индикатор хода выполнения мат после отображения диалогового окна

Question

У меня есть страница, на которой есть кнопка «Выполнить». Если я нажимаю кнопку «Выполнить», появляется диалоговое окно с двумя вариантами «Да» и «Нет». Если пользователь нажимает кнопку «Да», я хочу отобразить индикатор хода выполнения матов. Меня смущает, где писать html-код mat-progress bar и откуда его вызывать.

HTML код:

<mat-toolbar>
                        <div class="col-md-offset-11">
                            <button
                                mat-raised-button
                                mat-hint="Execute Query on Whole DataSet"
                                color="primary"
                                (click)="executeOnFullData()"
                            >
                                Run
                            </button>
                        </div>
                    </mat-toolbar>

Код TypeScript:

    executeOnFullData() {
    const dialogRef = this.dialog.open(ConfirmJobRunComponent, {
    });

    dialogRef.afterClosed()
}

HTML-код для диалогового окна:

<div class="card">
<div class="card-header"><h5 class="title">Confirm</h5></div>
<div class="content">
    <h3 mat-dialog-title>
        Are you sure you want to run Recommendation Settings on the entire
        Dataset?
    </h3>

    <div mat-dialog-actions>
        <button
            mat-button
            [mat-dialog-close]="true"
            (click)="confirmSelection()"
        >
            Yes
        </button>
        <button mat-button (click)="onNoClick()">
            Cancel
        </button>
    </div>
</div>

Код машинописного текста для DialogComponent

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<ConfirmJobRunComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any,
    public dataService: RecommendationService
) {}

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

confirmSelection(): void {}
}

Answer 1

Вы можете просто подписаться на afterClosed вашего dialogRef и на основании результата, который вы получите из своего диалогового окна (нажав «Да» возвращает true, нажав «Нет» false), вы можете отобразить mat-progressи выполните свою бизнес-логику.

Здесь представляет собой стековый блик, показывающий, как это может выглядеть.mat-progress в настоящее время является неопределенным и не ожидает завершения чего-либо, что зависит от вас.

Шаблон (в вашем компоненте, где расположена кнопка)

<mat-progress-bar *ngIf="showMatProgress" mode="indeterminate"></mat-progress-bar>

Компонент для шаблона выше

showMatProgress: boolean = false;

executeOnFullData() {
  const dialogRef = this.dialog.open(ConfirmJobRunComponent, {});

  dialogRef.afterClosed().subscribe((result) => {
    this.showMatProgress = result;
  });
}

В вашем диалоговом компоненте

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

confirmSelection(): void {
  this.dialogRef.close(true);
}