Docs (DialogMd data input): addresses confusion with injecting data #3907

M-a-c · 2017-04-04T22:52:43Z

Explained that services are a best practice if you need to pass data back and forth, depending on use case.
Added an example to show how to inject data into a Dialog.
Fixes Documentation is unclear about how to get data into a Dialog. #1947

fxck · 2017-04-05T09:00:35Z

src/lib/dialog/dialog.md

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


missing (

LOL how on earth? Must have hit the backspace key switching just before commit, that's super weird..

crisbeto · 2017-04-06T14:17:47Z

src/lib/dialog/dialog.md

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


I don't think we should talk about services here, because they're a general Angular pattern. We should mention the data option instead.

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)

I don't think it's Material's responsibility to expose users to services.

crisbeto · 2017-04-06T14:18:38Z

src/lib/dialog/dialog.md

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


We don't do spaces between the braces. It should be constructor(@Inject(MD_DIALOG_DATA) public data: any) { }.

crisbeto · 2017-04-07T14:10:31Z

src/lib/dialog/dialog.md

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


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

crisbeto · 2017-04-07T14:10:51Z

src/lib/dialog/dialog.md

+private dialog: MdDialog;
+
+let dialogRef = dialog.open(DialogName, {
+  data:'your data',


Add a space between the : and the string.

crisbeto · 2017-04-07T14:11:54Z

src/lib/dialog/dialog.md

+Here is an example component you can pass data to.
+```ts
+import {Component, Inject} from '@angular/core';
+import {MD_DIALOG_DATA} from '@angular/material';


You can leave the imports here since the injection is slightly more convoluted.

crisbeto · 2017-04-07T14:12:35Z

src/lib/dialog/dialog.md

+import {MD_DIALOG_DATA} from '@angular/material';
+
+@Component({
+  selector: 'dialog-selector',


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

crisbeto · 2017-04-07T14:13:22Z

src/lib/dialog/dialog.md

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


You should add backticks(`) around "data" in "The dialog component has a data option".

crisbeto · 2017-04-12T18:40:06Z

src/lib/dialog/dialog.md

@@ -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. The dialog component has a `data` option allowing you to pass data to the component.


Sorry for all the requests, but can you reword this to "If you want to share data with your dialog, you can use the data option to pass information to the dialog component.". Also if you remove the "Passing outside data to your component is as simple as." sentence the PR will be good to go.

crisbeto · 2017-04-12T18:40:59Z

src/lib/dialog/dialog.md

+});
+```
+
+Here is an example component you can pass data to.


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

crisbeto · 2017-04-12T18:41:45Z

src/lib/dialog/dialog.md

+  constructor(@Inject(MD_DIALOG_DATA) public data: any) { }
+}
+```
+


Can you reduce the amount of extra blank lines here? This is mainly for consistency.

M-a-c · 2017-04-13T19:25:45Z

Yeah your wording is a lot more crisp. I need to work on this my wording before I make more contributions.
Short sweet and to the point. Thanks for being patient crisbeto.

crisbeto

LGTM

henriquefm · 2017-04-14T22:22:31Z

Just a small detail: the name of the dialog class in dialog.open(DialogName, ... (line 36) is different from the actual class on line 51, export class YourDialog.

angular-automatic-lock-bot · 2019-09-06T11:02:31Z

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

added docs explaining how to pass data to a dialog

d11be3f

googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Apr 4, 2017

fxck reviewed Apr 5, 2017

View reviewed changes

fixed the constructor

9b0b297

crisbeto requested changes Apr 6, 2017

View reviewed changes

fixed spacing removed reference to services

4ce3cd9

crisbeto reviewed Apr 7, 2017

View reviewed changes

cleaned up doc

564295c

crisbeto reviewed Apr 12, 2017

View reviewed changes

more direct wording

cdb5fc1

crisbeto approved these changes Apr 14, 2017

View reviewed changes

crisbeto added pr: lgtm action: merge The PR is ready for merge by the caretaker labels Apr 14, 2017

crisbeto mentioned this pull request Apr 14, 2017

Add documentation for MD_DIALOG_DATA #3999

Closed

fixed YourDialog in open call

a45ca56

jelbourn merged commit 9f2c7ac into angular:master Apr 17, 2017

M-a-c deleted the dialogRef-data-in branch April 17, 2017 19:20

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 6, 2019

Docs (DialogMd data input): addresses confusion with injecting data #3907

Docs (DialogMd data input): addresses confusion with injecting data #3907

Uh oh!

Conversation

M-a-c commented Apr 4, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

M-a-c Apr 6, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

M-a-c commented Apr 13, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

crisbeto left a comment

Choose a reason for hiding this comment

Uh oh!

henriquefm commented Apr 14, 2017

Uh oh!

angular-automatic-lock-bot bot commented Sep 6, 2019

Uh oh!

Uh oh!

M-a-c commented Apr 4, 2017 •

edited

Loading

M-a-c Apr 6, 2017 •

edited

Loading

M-a-c commented Apr 13, 2017 •

edited

Loading