How to subscribe to angularMaterial Dialog afterClosed?

Based on the examples part of their documentation

let dialogRef = this.dialog.open(DialogResultExampleDialog);

dialogRef.afterClosed().subscribe(result => {
  this.selectedOption = result;
});

But you always can convert result to promise if needed

dialogRef.afterClosed().toPromise()

Do not forget to add toPromise support

import "rxjs/add/operator/toPromise";

https://material.angular.io/components/component/dialog

afterClosed method returns an Observable so it is not thenable like Promise object.

To avoid using toPromise method on the Observable you can use take(1) to unsubscribe automatically after the first event:

dialogRef.afterClosed().take(1).subscribe(result => {
  console.log(`Dialog result: ${result}`); // Pizza!
});

No need to unsubscribe from afterClosed() as it auto completes itself: https://github.com/angular/material2/blob/ae41a0ad69ca26c600f0f56c68dd5a1c102d4f1f/src/lib/dialog/dialog-ref.ts#L75


You can also use the first() RxJs operator instead of take(1). For my personal opinion it looks better (although they do the same).

dialogRef.afterClosed().first().subscribe(result => {
console.log(`Dialog result: ${result}`);
});