Skip to content
Merged
Changes from 2 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
27 changes: 27 additions & 0 deletions src/lib/dialog/dialog.md
Original file line number Diff line number Diff line change
Expand Up @@ -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).
Copy link
Member

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 data option instead.

Copy link
Contributor Author

@M-a-c M-a-c Apr 6, 2017

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.

  • Is there a spot that we could expose users to services? (lots of us are beginners)

Copy link
Member

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.


Passing outside data to your component is as simple as.
```ts
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 {MdDialog, MD_DIALOG_DATA} from '@angular/material';

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

We don't do spaces between the braces. It should be 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