Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Cdk DialogRef.afterClosed is called twice

See original GitHub issue

Bug, feature request, or proposal:

const dialogRef = this.dialog.openFromComponent(FooComponent);
dialogRef.afterClosed().subscribe(() => console.log('close'));

The above code logs “close” twice. From debugging i can see that the _onAnimationDone callback in cdk-dialog-container.ts is called twice.

What is the expected behavior?

It should emit an afterClosed once.

What is the current behavior?

Emits afterClosed twice.

What are the steps to reproduce?

https://angular-material2-issue-s2bybt.stackblitz.io

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

6.0.*

Is there anything else we should know?

Issue Analytics

State:
Created 5 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

lc-moxicommented, Feb 21, 2019

Thanks, this patched an issue we were seeing with Microsoft Edge

1reaction

jpzwartecommented, May 18, 2018

Workaround for now: dialogRef.afterClosed().pipe(take(1)).subscribe(...)

Top Results From Across the Web

Unable to pass data in Material Dialog in Angular Material

this.dialogRef.close(this.data);. afterClosed() should be subscribed to so that a handler is called when the dialog is closed.

Routing to Angular Material Dialogs | by John Crowson | ngconf

const dialogRef = this.dialog.open(DialogOverviewExampleDialog, { width: '250px', ... Navigate back to the parent in the MatDialog afterClosed subscription:

angular/angular - Gitter

AdmindashboardComponent is the component youre calling the dialog right? ... export class DialogOverviewExampleDialog { constructor( public dialogRef: ...

Easy Angular Testing – UI Elements – Dialog - Coder.Haus

The Ok button closes the dialog and sends data back to our calling method via the mat-dialog-close attribute and its bound value.

Dialog | Angular Material

afterClosed ().subscribe(result => { console.log(`Dialog result: ${result}`); // Pizza! }); dialogRef.close('Pizza!'); Components created via MatDialog can ...