Angular 6 Material - Await until Mat Dialog is closed

Question

I have a list of actions to be done, if the boolean promptRequired is set, I show a dialog and based its value do some action.

Problem here is the for loop runs in parallel and all actions are executed simultaneously, but I want the for loop to run synchronously and the loop must wait until the dialog is closed. Is there a solution?

async runActions() {
 for (const action of Actions) {
      if(action.promptRequired) {
      const dialogRef = this.promptDialog.open(PromptDialogComponent, {
        data: {action: action,
        },
      });
      // await dialogRef.afterClosed();
     }
    }

     const status =  await this.httpService.getRequest('runAction', action)
     // Do Some Action based on status
  }
 }
}

Answer 1

You can just turn the afterClosed Observable into a promise and await the result. Example:

async runActions() {
  for (const action of Actions) {
    if(action.promptRequired) {
      const dialogRef = this.promptDialog.open(PromptDialogComponent, {
        data: {action: action },
      });

      await dialogRef.afterClosed().toPromise();
    }
  }

  const status =  await this.httpService.getRequest('runAction', action)
  // Do Some Action based on status
}