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.

Continue reading...