Multiple dialog boxes, for loop, opening - angular 7 + angular material

Question

I have situation where I get from API String array of validation codes. Also I have mapper where I get description to code on front side.

Question is, there is possible to display material dialog after closing previous one?

My code:

.subscribe((res:string[]) => {
            console.log("res: ", res);

            let dialogRef: MatDialogRef<ValidationDialog>;

            for (let i = 0; i < res.length; i++) {
              const code = res[i];
              const description = this.locale.getDescription(code);

              let config      = new MatDialogConfig();
                  config.data = {code: code, description: description.value};

              console.log("dialogRef: ", dialogRef);



                dialogRef = this.dialog.open(ValidationDialog, config);
                console.log("--Dialog--");
                console.log("Data: ", config.data, this.dialog);
                dialogRef.afterClosed().subscribe(data => {
                  console.log("data returned from mat-dialog-close is ", data);
                });

With if statement, where i check dialogRef, I get only one dialog, without it like in example, I have opened all dialogs in same time.

Please for advice,

Answer 1

If I understand correctly, you want to open dialogs one after another for each of the items in the array you get back?

private doSomething(): void {
  this.something.subscribe((res: string[]) => {
    this.showDialog(res, 0);
  });
}

private showDialog(data: string[], idx: number): void {
  if (i >= data.length) return; // finished processing list

  const item = data[i];
  // setup...

  const dialog = this.dialog.open(ValidationDialog, config);
  const sub = dialog.afterclosed()
    .subscribe((data) => {
      sub.unsubscribe();
      console.log(`Data from closed dialog: ${data}`);
      console.log('Opening next dialog...');
      this.showDialog(data, idx + 1); // recursively open next dialog
    });
}