Angular Material Dialog Closes Before Api Requests Are Completed

Issue

Using Angular Material 16, I am having an issue where the API requests are not fully complete in the dialog (forkJoin) before the dialog closes and the dialogRef.afterClosed() invokes. I can see this because in the browser network tab, I see apis being consumed by the afterClose() call back before apis in the dialogues are complete.

Why is this and how can I make the dialog wait until all the requests are complete from the forkJoin?

<button
  [mat-dialog-close]="true"
  mat-raised-button
  cdkFocusInitial
  (click)="deleteRecords()"
  color="accent">DELETE RECORDS</button>

---

openConfirmDialog() {
  const { recordsToDelete } = this;
  const dialogRef = this.dialog.open(DeleteRecordsDialog, {
    data: { recordsToDelete }
  });                                                                                  
                                                                                
  dialogRef.afterClosed().subscribe((isSubmit) => {                                                                                  
    if (isSubmit) {                                                                                  
      this.#setFirstTablePage();                                                                                  
      this.resetCheckboxes();                                                                                  
    }                                                                                  
  });                                                                                  
}  

---

  @Component({                                                                                  
    selector: 'delete-records-dialog',                                                                                  
    templateUrl: 'delete-records-dialog.html',                                                                                  
  })                                                                                  
  export class DeleteRecordsDialog {                                                                                  
    recordsToDelete: Array<object>;                                                                                  
                                                                                    
    constructor(                                                                                  
      @Inject(MAT_DIALOG_DATA) public data: {                                                                                  
        recordsToDelete: Array<object>,                                                                                  
      },                                                                                  
      private apiService: ApiService,                                                                                  
      private dialogRef: MatDialogRef<DeleteRecordsDialog>,                                                                                  
    ) {                                                                                  
      this.recordsToDelete = data.recordsToDelete;                                                                                  
    }                                                                                  
                                                                                    
    deleteRecords() {                                                                                  
      const httpReuests = this.recordsToDelete.map((id) => (                                                                                  
        this.apiService.deleteRecord(id)                                                                                  
      ));                                                                                  
                                                                                    
      const complete = () => {                                                                                  
        this.dialogRef.close();                                                                                  
      }                                                                                  
                                                                                    
      forkJoin(httpReuests).subscribe({ complete });                                                                                  
    }                                                                                  
  }  

Solution

So basically your [mat-dialog-close]="true" closes your dialog at the same time as you fire your click event and so the delete and close are running at the same time but closing is faster then your delete. To fix this you might want to move your delete to the afterClosed callback and await it.

Or what I like to do is pass an async callback to the dialog via the injected data and then await the callback and in the callback I close the dialog.

Answered By - JDev