Angular Material Dialog closes immediately

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.

Solution

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>