Angular Material Dialog closes immediately

Question

I try to open a Angular Material dialog from my component. But the dialog closes immediately after it opens.

I know there are some similar questions on Stackoverflow, but their answers don't seem to work for me. Not sure if calling the dialog function out of the complete part of the subscription is the problem.

ExampleDialogComponent.ts

export class ExampleDialogComponent implements OnInit {

  inputVal1: string;
  inputVal2: string;

  constructor(public dialogRef: MatDialogRef<ExampleDialogComponent>,
              @Inject(MAT_DIALOG_DATA) public data: any, private formBuilder: FormBuilder) {
    this.inputVal1 = data.inputVal1;
    this.inputVal2 = data.inputVal2;
  }

  ngOnInit() {
    this.firstFormGroup = this.formBuilder.group({
      firstCtrl: ['', Validators.required]
    });
    this.secondFormGroup = this.formBuilder.group({
      secondCtrl: ['', Validators.required]
    });
  }

  onCloseConfirm() {
    setTimeout(() => {
      this.dialogRef.close({
      message: 'Confirm',
      outputVal1: this.inputVal1,
      outputVal2: this.inputVal2,
      });
    }, 0);
  }
}

ExampleDialogComponent.html

<mat-step>
      <ng-template matStepLabel>last step</ng-template>
      <mat-dialog-actions>
        <button mat-button [mat-dialog-close]="onCloseConfirm()">add</button>
        <button mat-button mat-dialog-close>close</button>
      </mat-dialog-actions>
</mat-step>

MainCompontent.ts

openModal() {
    this.inputs = [];
    this.http.getInputs().subscribe(
      data => {
        data.forEach(element => this.inputs.push(element));
      },
      (err) => {
        console.log(err);
      },
      () => {
        this.openAddDialog();
      });
  }

  openAddDialog() {
    const dialogConfig = new MatDialogConfig();

    dialogConfig.disableClose = true;
    dialogConfig.autoFocus = true;
    dialogConfig.data = {
      inputValue1: 'test 1',
      inputValue2: 'test 2',
    };

    const dialogRef = this.dialog.open(ExampleDialogComponent, dialogConfig);

    dialogRef.afterClosed().subscribe(result => {
      console.log('Dialog was closed');
      console.log('result: ' + result);

      this.http.createResultinDB(result);
        .subscribe(subData => console.log(subData), error => console.log(error));
    });
  }

  getDeliveryPackageList(): Observable<any> {
    return this.http.get(`${this.baseUrl}`);
  }

Thanks a lot for your help.

Answer 1

For me, the source of the problem was different. I had an hyperlink with a (click) property. When I clicked on the hyperlink, the function that opened the dialog was called, but the event was propagated to the href of the <a> element, closing immediately the dialog after it was open. Solution was to stop the propagation.

<a href="#" (click)="$event.preventDefault(); aboutMyApp();">About...</a>

...

aboutMyApp() {
    const dialogRef = this.dialog.open(AboutDialog, { width: '400px', height: 'auto' });
}

Hope this can be useful to anyone.

Answer 2

This line is causing the issue:

<button mat-button [mat-dialog-close]="onCloseConfirm()">add</button>

The onCloseConfirm function is getting called immediately when the dialog opens, because of how angular binding works.

You have a couple options. You can use a click handler on the button to call your function:

<button mat-button (click)="onCloseConfirm()">add</button>

You or you can continue using [mat-dialog-close], and not use your onCloseConfirm function:

<button mat-button [mat-dialog-close]="[inputVal1, inputVal2]">add</button>