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.

Did you add it as an entryComponent in your module? Unless you're on Angular 9, you'll need to do that. See this... https://stackoverflow.com/questions/41519481/angular2-material-dialog-has-issues-did-you-add-it-to-ngmodule-entrycomponent — Adam Dunkerley, Feb 18 '20 at 13:34

score 9 · Answer 1 · answered Mar 25 '20 at 23:30

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.

Thanks... this solved my issue perfectly – malc Nov 27 '21 at 19:27 — malc, Nov 27 '21 at 19:27

score 5 · Accepted Answer · answered Feb 18 '20 at 15:12

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>

Thank you for the good explanation. worked well for me. – 0x44656E6E79 Feb 19 '20 at 08:21 — 0x44656E6E79, Feb 19 '20 at 08:21

score 0 · Answer 3 · answered Feb 18 '20 at 15:46

0

The problem is that you have to add to your app.module.ts the entryComponents array with the name of your Dialog component as follow:

@NgModule({
  entryComponents: [
    ExampleDialogComponent
  ],
  declarations: [...],
.
.
.
})

answered Feb 18 '20 at 15:46

beanic

539
6
22

Thanks for the tip. Added ExampleDialogComponent to entryCompontents and declarations, but the problem still occurs. – 0x44656E6E79 Feb 19 '20 at 08:19

score 0 · Answer 4 · answered May 01 '20 at 10:14

0

removing the link solved my problem in my case, I remove link from

 <a class="fa fa-user" aria-hidden="true" href="/#/home/homepage" (click)="opendialogue()" >&nbsp;Profile</a>

I remove unwanted link i.e. href="/#/home/homepage" to overcome from automatic closing of dialogue

answered May 01 '20 at 10:14

jayesh yadav

11

Welcome to StackOverflow. Please take some time to read the [help page](https://stackoverflow.com/help/minimal-reproducible-example) for Minimal, Reproducible Example. – Shiv Kumar Baghel May 01 '20 at 13:04

Angular Material Dialog closes immediately

4 Answers4