From d11be3f62ecf8544623604845a03668a8da10184 Mon Sep 17 00:00:00 2001 From: Mac Date: Tue, 4 Apr 2017 15:49:45 -0700 Subject: [PATCH 1/6] added docs explaining how to pass data to a dialog --- src/lib/dialog/dialog.md | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/src/lib/dialog/dialog.md b/src/lib/dialog/dialog.md index 622f4b724294..8241d15b1d0f 100644 --- a/src/lib/dialog/dialog.md +++ b/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). + +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: From 9b0b297fa0419f2dc5e9624669dde18a1deb6cc2 Mon Sep 17 00:00:00 2001 From: Mac Date: Wed, 5 Apr 2017 11:27:43 -0700 Subject: [PATCH 2/6] fixed the constructor --- src/lib/dialog/dialog.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/dialog/dialog.md b/src/lib/dialog/dialog.md index 8241d15b1d0f..a742a2325351 100644 --- a/src/lib/dialog/dialog.md +++ b/src/lib/dialog/dialog.md @@ -50,7 +50,7 @@ import {MdDialog, MD_DIALOG_DATA} from '@angular/material'; }) export class DialogName { - constructor@Inject(MD_DIALOG_DATA) public data: any) { } + constructor( @Inject(MD_DIALOG_DATA) public data: any ) { } } ``` From 4ce3cd9310bf0cffe85c9871aa561a46e34366ae Mon Sep 17 00:00:00 2001 From: Mac Date: Thu, 6 Apr 2017 11:50:02 -0700 Subject: [PATCH 3/6] fixed spacing removed reference to services --- src/lib/dialog/dialog.md | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/lib/dialog/dialog.md b/src/lib/dialog/dialog.md index a742a2325351..9e4c52ae56d6 100644 --- a/src/lib/dialog/dialog.md +++ b/src/lib/dialog/dialog.md @@ -30,10 +30,14 @@ in which they are contained. When closing, an optional result value can be provi 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). +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'; + +private dialog: MdDialog; + let dialogRef = dialog.open(DialogName, { data:'your data', }); @@ -42,7 +46,7 @@ let dialogRef = dialog.open(DialogName, { 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'; +import {MD_DIALOG_DATA} from '@angular/material'; @Component({ selector: 'dialog-selector', @@ -50,7 +54,7 @@ import {MdDialog, MD_DIALOG_DATA} from '@angular/material'; }) export class DialogName { - constructor( @Inject(MD_DIALOG_DATA) public data: any ) { } + constructor(@Inject(MD_DIALOG_DATA) public data: any) { } } ``` From 564295cf75b40388d621c28a0c265f2af72bb726 Mon Sep 17 00:00:00 2001 From: Mac Date: Mon, 10 Apr 2017 16:23:57 -0700 Subject: [PATCH 4/6] cleaned up doc --- src/lib/dialog/dialog.md | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/src/lib/dialog/dialog.md b/src/lib/dialog/dialog.md index 9e4c52ae56d6..3e76fc3ffef4 100644 --- a/src/lib/dialog/dialog.md +++ b/src/lib/dialog/dialog.md @@ -30,16 +30,12 @@ in which they are contained. When closing, an optional result value can be provi 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. +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. Passing outside data to your component is as simple as. ```ts -import {MdDialog} from '@angular/material'; - -private dialog: MdDialog; - let dialogRef = dialog.open(DialogName, { - data:'your data', + data: 'your data', }); ``` @@ -49,11 +45,11 @@ import {Component, Inject} from '@angular/core'; import {MD_DIALOG_DATA} from '@angular/material'; @Component({ - selector: 'dialog-selector', + selector: 'your-dialog', template: 'passed in {{ data }}', }) -export class DialogName { +export class YourDialog { constructor(@Inject(MD_DIALOG_DATA) public data: any) { } } ``` From cdb5fc1814db2541c65a9402a82cb2da00838510 Mon Sep 17 00:00:00 2001 From: Mac Date: Thu, 13 Apr 2017 12:26:21 -0700 Subject: [PATCH 5/6] more direct wording --- src/lib/dialog/dialog.md | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/lib/dialog/dialog.md b/src/lib/dialog/dialog.md index 3e76fc3ffef4..928ddf076f52 100644 --- a/src/lib/dialog/dialog.md +++ b/src/lib/dialog/dialog.md @@ -29,17 +29,16 @@ 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. +### Sharing data with the Dialog component. +If you want to share data with your dialog, you can use the `data` option to pass information to the dialog component. -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. +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'; @@ -53,8 +52,6 @@ export class YourDialog { constructor(@Inject(MD_DIALOG_DATA) public data: any) { } } ``` - - ### Dialog content Several directives are available to make it easier to structure your dialog content: From a45ca566b0490ec56503497b0ff52a4c4950a8d6 Mon Sep 17 00:00:00 2001 From: Mac Carter Date: Fri, 14 Apr 2017 21:31:46 -0700 Subject: [PATCH 6/6] fixed YourDialog in open call --- src/lib/dialog/dialog.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/dialog/dialog.md b/src/lib/dialog/dialog.md index 928ddf076f52..70272dd6aae0 100644 --- a/src/lib/dialog/dialog.md +++ b/src/lib/dialog/dialog.md @@ -33,7 +33,7 @@ value is forwarded as the result of the `afterClosed` promise. If you want to share data with your dialog, you can use the `data` option to pass information to the dialog component. ```ts -let dialogRef = dialog.open(DialogName, { +let dialogRef = dialog.open(YourDialog, { data: 'your data', }); ```