From c9e1844596dd09ed38ac890c4e52432fad658de0 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Sun, 18 Dec 2016 15:25:49 +0200
Subject: [PATCH] feat(dialog): add a config option for passing in data

Adds the ability to pass in data to a dialog via the `data` property. While this was previously possible through the `dialogRef.componentInstance.someUserSuppliedProperty`, it wasn't the most intuitive. The new approach looks like this:

```
dialog.open(SomeDialog, {
  data: {
    hello: 'world'
  }
});

class SometDialog {
  constructor(data: MdDialogData) {
    console.log(data['hello']);
  }
}
```

Fixes #2181.
---
 src/demo-app/dialog/dialog-demo.html | 10 ++++++-
 src/demo-app/dialog/dialog-demo.ts   | 18 ++++++++-----
 src/lib/dialog/dialog-config.ts      |  7 +++++
 src/lib/dialog/dialog-injector.ts    | 10 ++++++-
 src/lib/dialog/dialog.spec.ts        | 39 ++++++++++++++++++++++++++--
 src/lib/dialog/dialog.ts             |  4 +--
 6 files changed, 75 insertions(+), 13 deletions(-)

diff --git a/src/demo-app/dialog/dialog-demo.html b/src/demo-app/dialog/dialog-demo.html
index 53734bbbfdff..0391728e7cca 100644
--- a/src/demo-app/dialog/dialog-demo.html
+++ b/src/demo-app/dialog/dialog-demo.html
@@ -46,7 +46,15 @@ <h2>Other options</h2>
       </md-select>
     </p>
 
-    <md-checkbox [(ngModel)]="config.disableClose">Disable close</md-checkbox>
+    <p>
+      <md-input-container>
+        <input mdInput [(ngModel)]="config.data.message" placeholder="Dialog message">
+      </md-input-container>
+    </p>
+
+    <p>
+      <md-checkbox [(ngModel)]="config.disableClose">Disable close</md-checkbox>
+    </p>
   </md-card-content>
 </md-card>
 
diff --git a/src/demo-app/dialog/dialog-demo.ts b/src/demo-app/dialog/dialog-demo.ts
index 5e91c097f9aa..c7109a8ebebd 100644
--- a/src/demo-app/dialog/dialog-demo.ts
+++ b/src/demo-app/dialog/dialog-demo.ts
@@ -1,6 +1,7 @@
 import {Component, Inject} from '@angular/core';
 import {DOCUMENT} from '@angular/platform-browser';
-import {MdDialog, MdDialogRef, MdDialogConfig} from '@angular/material';
+import {MdDialog, MdDialogRef, MdDialogConfig, MdDialogData} from '@angular/material';
+
 
 @Component({
   moduleId: module.id,
@@ -21,6 +22,9 @@ export class DialogDemo {
       bottom: '',
       left: '',
       right: ''
+    },
+    data: {
+      message: 'Jazzy jazz jazz'
     }
   };
 
@@ -41,7 +45,7 @@ export class DialogDemo {
   openJazz() {
     this.dialogRef = this.dialog.open(JazzDialog, this.config);
 
-    this.dialogRef.afterClosed().subscribe(result => {
+    this.dialogRef.afterClosed().subscribe((result: string) => {
       this.lastCloseResult = result;
       this.dialogRef = null;
     });
@@ -59,13 +63,13 @@ export class DialogDemo {
   template: `
   <p>It's Jazz!</p>
   <p><label>How much? <input #howMuch></label></p>
-  <p> {{ jazzMessage }} </p>
+  <p> {{ data.message }} </p>
   <button type="button" (click)="dialogRef.close(howMuch.value)">Close dialog</button>`
 })
 export class JazzDialog {
-  jazzMessage = 'Jazzy jazz jazz';
-
-  constructor(public dialogRef: MdDialogRef<JazzDialog>) { }
+  constructor(
+    public dialogRef: MdDialogRef<JazzDialog>,
+    public data: MdDialogData) { }
 }
 
 
@@ -104,7 +108,7 @@ export class JazzDialog {
         color="primary"
         href="https://en.wikipedia.org/wiki/Neptune"
         target="_blank">Read more on Wikipedia</a>
-      
+
       <button
         md-button
         color="secondary"
diff --git a/src/lib/dialog/dialog-config.ts b/src/lib/dialog/dialog-config.ts
index 070ed8272876..52e0a9786853 100644
--- a/src/lib/dialog/dialog-config.ts
+++ b/src/lib/dialog/dialog-config.ts
@@ -11,6 +11,10 @@ export interface DialogPosition {
   right?: string;
 };
 
+/** Data to be injected into a dialog. */
+export class MdDialogData {
+  [key: string]: any;
+}
 
 /**
  * Configuration for opening a modal dialog with the MdDialog service.
@@ -33,5 +37,8 @@ export class MdDialogConfig {
   /** Position overrides. */
   position?: DialogPosition;
 
+  /** Data being injected into the child component. */
+  data?: MdDialogData;
+
   // TODO(jelbourn): add configuration for lifecycle hooks, ARIA labelling.
 }
diff --git a/src/lib/dialog/dialog-injector.ts b/src/lib/dialog/dialog-injector.ts
index 76f589e66066..839170524463 100644
--- a/src/lib/dialog/dialog-injector.ts
+++ b/src/lib/dialog/dialog-injector.ts
@@ -1,16 +1,24 @@
 import {Injector} from '@angular/core';
 import {MdDialogRef} from './dialog-ref';
+import {MdDialogData} from './dialog-config';
 
 
 /** Custom injector type specifically for instantiating components with a dialog. */
 export class DialogInjector implements Injector {
-  constructor(private _dialogRef: MdDialogRef<any>, private _parentInjector: Injector) { }
+  constructor(
+    private _dialogRef: MdDialogRef<any>,
+    private _data: MdDialogData,
+    private _parentInjector: Injector) { }
 
   get(token: any, notFoundValue?: any): any {
     if (token === MdDialogRef) {
       return this._dialogRef;
     }
 
+    if (token === MdDialogData && this._data) {
+      return this._data;
+    }
+
     return this._parentInjector.get(token, notFoundValue);
   }
 }
diff --git a/src/lib/dialog/dialog.spec.ts b/src/lib/dialog/dialog.spec.ts
index e4196924deaa..6955d9ea763e 100644
--- a/src/lib/dialog/dialog.spec.ts
+++ b/src/lib/dialog/dialog.spec.ts
@@ -14,6 +14,7 @@ import {MdDialog} from './dialog';
 import {OverlayContainer} from '../core';
 import {MdDialogRef} from './dialog-ref';
 import {MdDialogContainer} from './dialog-container';
+import {MdDialogData} from './dialog-config';
 
 
 describe('MdDialog', () => {
@@ -271,6 +272,28 @@ describe('MdDialog', () => {
     expect(overlayContainerElement.querySelectorAll('md-dialog-container').length).toBe(0);
   });
 
+  describe('passing in data', () => {
+    it('should be able to pass in data', () => {
+      let config = {
+        data: {
+          stringParam: 'hello',
+          dateParam: new Date()
+        }
+      };
+
+      let instance = dialog.open(DialogWithInjectedData, config).componentInstance;
+
+      expect(instance.data['stringParam']).toBe(config.data.stringParam);
+      expect(instance.data['dateParam']).toBe(config.data.dateParam);
+    });
+
+    it('should throw if injected data is expected but none is passed', () => {
+      expect(() => {
+        dialog.open(DialogWithInjectedData);
+      }).toThrow();
+    });
+  });
+
   describe('disableClose option', () => {
     it('should prevent closing via clicks on the backdrop', () => {
       dialog.open(PizzaMsg, {
@@ -505,19 +528,31 @@ class ComponentThatProvidesMdDialog {
   constructor(public dialog: MdDialog) {}
 }
 
+/** Simple component for testing ComponentPortal. */
+@Component({template: ''})
+class DialogWithInjectedData {
+  constructor(public data: MdDialogData) { }
+}
+
 // Create a real (non-test) NgModule as a workaround for
 // https://github.com/angular/angular/issues/10760
 const TEST_DIRECTIVES = [
   ComponentWithChildViewContainer,
   PizzaMsg,
   DirectiveWithViewContainer,
-  ContentElementDialog
+  ContentElementDialog,
+  DialogWithInjectedData
 ];
 
 @NgModule({
   imports: [MdDialogModule],
   exports: TEST_DIRECTIVES,
   declarations: TEST_DIRECTIVES,
-  entryComponents: [ComponentWithChildViewContainer, PizzaMsg, ContentElementDialog],
+  entryComponents: [
+    ComponentWithChildViewContainer,
+    PizzaMsg,
+    ContentElementDialog,
+    DialogWithInjectedData
+  ],
 })
 class DialogTestModule { }
diff --git a/src/lib/dialog/dialog.ts b/src/lib/dialog/dialog.ts
index 93e48cd6b2fc..7aad06b0a8cf 100644
--- a/src/lib/dialog/dialog.ts
+++ b/src/lib/dialog/dialog.ts
@@ -129,7 +129,7 @@ export class MdDialog {
     // to modify and close it.
     let dialogRef = <MdDialogRef<T>> new MdDialogRef(overlayRef);
 
-    if (!dialogContainer.dialogConfig.disableClose) {
+    if (!config.disableClose) {
       // When the dialog backdrop is clicked, we want to close it.
       overlayRef.backdropClick().first().subscribe(() => dialogRef.close());
     }
@@ -141,7 +141,7 @@ export class MdDialog {
     // inject the MdDialogRef. This allows a component loaded inside of a dialog to close itself
     // and, optionally, to return a value.
     let userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;
-    let dialogInjector = new DialogInjector(dialogRef, userInjector || this._injector);
+    let dialogInjector = new DialogInjector(dialogRef, config.data, userInjector || this._injector);
 
     let contentPortal = new ComponentPortal(component, null, dialogInjector);