Skip to content
New issue

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

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

Already on GitHub? # 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
# for free to subscribe to this conversation on GitHub. Already have an account? #.
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