Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Type safe dialog afterClosed() #8760

Closed
mina-skunk opened this issue Dec 1, 2017 · 5 comments · Fixed by #8766
Closed

Type safe dialog afterClosed() #8760

mina-skunk opened this issue Dec 1, 2017 · 5 comments · Fixed by #8766
Assignees
Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@mina-skunk
Copy link
Contributor

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.

@crisbeto crisbeto self-assigned this Dec 1, 2017
@crisbeto crisbeto added has pr P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent labels Dec 1, 2017
crisbeto added a commit to crisbeto/material2 that referenced this issue Dec 1, 2017
Adds an extra generic param to the `MatDialogRef` that allows consumers to type the result that is passed to `close`, as well as the value in the `beforeClosed` and `afterClosed` observables.

Fixes angular#8760.
crisbeto added a commit to crisbeto/material2 that referenced this issue Dec 2, 2017
Adds an extra generic param to the `MatDialogRef` that allows consumers to type the result that is passed to `close`, as well as the value in the `beforeClosed` and `afterClosed` observables.

Fixes angular#8760.
crisbeto added a commit to crisbeto/material2 that referenced this issue Dec 7, 2017
Adds an extra generic param to the `MatDialogRef` that allows consumers to type the result that is passed to `close`, as well as the value in the `beforeClosed` and `afterClosed` observables.

Fixes angular#8760.
andrewseguin pushed a commit that referenced this issue Dec 13, 2017
Adds an extra generic param to the `MatDialogRef` that allows consumers to type the result that is passed to `close`, as well as the value in the `beforeClosed` and `afterClosed` observables.

Fixes #8760.
@mina-skunk
Copy link
Contributor Author

Will there be an example of how to utilize?

andrewseguin pushed a commit to andrewseguin/components that referenced this issue Dec 19, 2017
Adds an extra generic param to the `MatDialogRef` that allows consumers to type the result that is passed to `close`, as well as the value in the `beforeClosed` and `afterClosed` observables.

Fixes angular#8760.
@danwulff
Copy link

@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
Copy link
Contributor

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
Copy link

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

@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 8, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants