Mat Dialog Does Not Close After mat-dialog-close Data Binding Is True

Question

I have this angular dialog component which I want to close only after the api has completed. I have the following below, but the dialog is not closing when this.matchComplete = true in complete.

   <mat-dialog-actions align="end">
    <button mat-button mat-dialog-close color="accent">Cancel</button>
    <button
      mat-raised-button
      [mat-dialog-close]="matchComplete"
      cdkFocusInitial    
      (click)="matchDialog()"
      color="accent">Continue</button>
  </mat-dialog-actions>

  @Component({
    selector: 'match-dialog',
    templateUrl: 'match-dialog.html',
  })
  
  export class MatchDialog {
    matchComplete: boolean;
  
    constructor(
      @Inject(MAT_DIALOG_DATA) public data: {text: string, foo: object},
      private apiService: ApiService,
    ) {
      this.matchComplete = false;
    }
  
    matchDialog() {
      this.apiService.add()
        .subscribe(null, null, () => this.matchComplete = true);
    }                                             
  }

score 1 · Accepted Answer · answered Aug 17 '23 at 15:03

I think you're a little confused on how [mat-dialog-close] works. I think this question is best answered here: Usage of [mat-dialog-close]

The second highest answer by Torinthiel provides a great look at how mat-dialog-close works and how you want to close the mat dialog component.

Mat Dialog Does Not Close After mat-dialog-close Data Binding Is True

1 Answers1