-
Notifications
You must be signed in to change notification settings - Fork 6.8k
Docs (DialogMd data input): addresses confusion with injecting data #3907
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
Changes from 2 commits
d11be3f
9b0b297
4ce3cd9
564295c
cdb5fc1
a45ca56
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -29,6 +29,33 @@ Components created via `MdDialog` can _inject_ `MdDialogRef` and use it to close | |
| in which they are contained. When closing, an optional result value can be provided. This result | ||
| value is forwarded as the result of the `afterClosed` promise. | ||
|
|
||
| ### Sharing Data with the Dialog component. | ||
| Depending on what you are doing you might want to share data with your dialog component. Angular has documentation that explains in general how to share data between any components using [`services`](https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service). | ||
|
|
||
| Passing outside data to your component is as simple as. | ||
| ```ts | ||
| let dialogRef = dialog.open(DialogName, { | ||
| data:'your data', | ||
|
||
| }); | ||
| ``` | ||
|
|
||
| Here is an example component you can pass data to. | ||
|
||
| ```ts | ||
| import {Component, Inject} from '@angular/core'; | ||
| import {MdDialog, MD_DIALOG_DATA} from '@angular/material'; | ||
|
|
||
| @Component({ | ||
| selector: 'dialog-selector', | ||
|
||
| template: 'passed in {{ data }}', | ||
| }) | ||
|
|
||
| export class DialogName { | ||
| constructor( @Inject(MD_DIALOG_DATA) public data: any ) { } | ||
|
||
| } | ||
| ``` | ||
|
|
||
|
||
|
|
||
|
|
||
| ### Dialog content | ||
| Several directives are available to make it easier to structure your dialog content: | ||
|
|
||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't think we should talk about services here, because they're a general Angular pattern. We should mention the
dataoption instead.Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah I agree. Should that ever be addressed in Angular Material documentation? Since a lot of the components are interactive, services seem pretty fundamental to the 'passing data problem' I started with Angular 3 months ago, and I was introduced to services by a few other developers asking why I was doing everything so backwards. I'm glad they brought it up, because in the long run it made my code a lot easier to understand.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't think it's Material's responsibility to expose users to services.