Skip to content

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

Merged
merged 6 commits into from
Apr 17, 2017
Merged
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 31 additions & 0 deletions src/lib/dialog/dialog.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Copy link
Member

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


Passing outside data to your component is as simple as.
```ts
import {MdDialog} from '@angular/material';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In this example it's pretty obvious where MdDialog comes from so you can remove this line and the private dialog: MdDialog.


private dialog: MdDialog;

let dialogRef = dialog.open(DialogName, {
data:'your data',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add a space between the : and the string.

});
```

Here is an example component you can pass data to.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you change this to "To access the data in your dialog component, you have to use the MD_DIALOG_DATA injection token:"?

```ts
import {Component, Inject} from '@angular/core';
import {MD_DIALOG_DATA} from '@angular/material';
Copy link
Member

Choose a reason for hiding this comment

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok


@Component({
selector: 'dialog-selector',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Try renaming this to something like your-dialog and the class to YourDialog.

template: 'passed in {{ data }}',
})

export class DialogName {
constructor(@Inject(MD_DIALOG_DATA) public data: any) { }
}
```

Copy link
Member

Choose a reason for hiding this comment

The 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:

Expand Down