Type safe dialog afterClosed()

Bug, feature request, or proposal:

feature request

What is the expected behavior?

MatDialogRef.afterClosed() return Observable of a type other than any.

What is the current behavior?

MatDialogRef.afterClosed() returns Observable<any>.

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

type safety

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

all

Is there anything else we should know?

I tried:

export interface DialogComponent<R> { }

export interface TypedMatDialogRef<T extends DialogComponent<R>, R> extends MatDialogRef<T> {
  afterClosed(): Observable<R>;
}

export interface TypedMatDialog extends MatDialog {
  open<T extends DialogComponent<R>, R, D = any>(componentOrTemplateRef: ComponentType<T>, config?: MatDialogConfig<D>): TypedMatDialogRef<T, R>;
}

@Component({})
export class MyDialogComponent implements DialogComponent<string> { }

(this.dialog as TypedMatDialog).open(MyDialogComponent)
  .afterClosed()
  .subscribe(string => {/* string is showing as {}*/});

Not sure why this doesn’t work.

[andrewseguin]

Here’s a quick example of defining the result type: https://stackblitz.com/edit/angular-iw4975?file=app/dialog-overview-example.ts

Note that result is typed as string via let dialogRef: MatDialogRef<DialogOverviewExampleDialog, string>

If you try changing it to number, you’ll see an error show up when you try to assign result to animal which demonstrates that it is typing correctly.

[william-lohan]

Will there be an example of how to utilize?