-
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 3 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,37 @@ 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. The dialog component has a data option that you can include in order to pass data from the open to the dialog. | ||
|
||
Passing outside data to your component is as simple as. | ||
```ts | ||
import {MdDialog} from '@angular/material'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. In this example it's pretty obvious where |
||
|
||
private dialog: MdDialog; | ||
|
||
let dialogRef = dialog.open(DialogName, { | ||
data:'your data', | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Add a space between the |
||
}); | ||
``` | ||
|
||
Here is an example component you can pass data to. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Can you change this to "To access the |
||
```ts | ||
import {Component, Inject} from '@angular/core'; | ||
import {MD_DIALOG_DATA} from '@angular/material'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. You can leave the imports here since the injection is slightly more convoluted. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. ok |
||
|
||
@Component({ | ||
selector: 'dialog-selector', | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Try renaming this to something like |
||
template: 'passed in {{ data }}', | ||
}) | ||
|
||
export class DialogName { | ||
constructor(@Inject(MD_DIALOG_DATA) public data: any) { } | ||
} | ||
``` | ||
|
||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Can you reduce the amount of extra blank lines here? This is mainly for consistency. |
||
|
||
|
||
### 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.
You should add backticks(`) around "data" in "The dialog component has a data option".