Type safe dialog afterClosed()

[mina-skunk]

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.

[mina-skunk]

Will there be an example of how to utilize?

[danwulff]

@crisbeto @andrewseguin To add to @gatimus I don't see any examples of this in the docs. Could you provide a quick sample here and consider adding something to the docs?

[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.

[nhhockeyplayer]

i would hardly call that a type safe dialog
when it automates the form and the template based on ANY interface automagically without having to key in every named field then it will be type safe