Switch to using an OpaqueToken.

Author: crisbeto

src/demo-app/dialog/dialog-demo.ts

@@ -1,5 +1,5 @@
-import {Component} from '@angular/core';
-import {MdDialog, MdDialogRef, MdDialogConfig, MdDialogData} from '@angular/material';
+import {Component, Inject} from '@angular/core';
+import {MdDialog, MdDialogRef, MdDialogConfig, MD_DIALOG_DATA} from '@angular/material';
 
 @Component({
   moduleId: module.id,
@@ -55,7 +55,7 @@ export class DialogDemo {
 export class JazzDialog {
   constructor(
     public dialogRef: MdDialogRef<JazzDialog>,
-    public data: MdDialogData) { }
+    @Inject(MD_DIALOG_DATA) public data: any) { }
 }
 
 

src/lib/dialog/README.md

@@ -15,7 +15,7 @@ MdDialog is a service, which opens dialogs components in the view.
 | --- | ------------ |
 | `role?: DialogRole = 'dialog'` | The ARIA role of the dialog element. Possible values are `dialog` and `alertdialog`. |
 | `disableClose?: boolean = false` | Whether to prevent the user from closing a dialog by clicking on the backdrop or pressing escape. |
-| `data?: { [key: string]: any }` | Data that will be injected into the dialog as `MdDialogData`. |
+| `data?: { [key: string]: any }` | Data that will be injected into the dialog as via the `MD_DIALOG_DATA` token. |
 | `width?: string = ''` | Width of the dialog. Takes any valid CSS value. |
 | `height?: string = ''` | Height of the dialog. Takes any valid CSS value. |
 | `position?: { top?: string, bottom?: string, left?: string, right?: string }` | Position of the dialog that overrides the default centering in it's axis. |
@@ -70,23 +70,6 @@ export class PizzaComponent {
     });
   }
 }
-
-@Component({
-  selector: 'pizza-dialog',
-  template: `
-  <h1 md-dialog-title>Would you like to order a {{ data.pizzaType }} pizza?</h1>
-
-  <md-dialog-actions>
-    <button (click)="dialogRef.close('yes')">Yes</button>
-    <button md-dialog-close>No</button>
-  </md-dialog-actions>
-  `
-})
-export class PizzaDialog {
-  constructor(
-    public dialogRef: MdDialogRef<PizzaDialog>,
-    public data: MdDialogData) { }
-}
 ```
 
 The dialog component should be declared in the list of entry components of the module:
@@ -106,3 +89,25 @@ The dialog component should be declared in the list of entry components of the m
 export class AppModule { }
 
 ```
+
+## Injecting data
+If you want to pass in extra data to your dialog instance, you can do so
+by using the `MD_DIALOG_DATA` injection token.
+```
+@Component({
+  selector: 'pizza-dialog',
+  template: `
+  <h1 md-dialog-title>Would you like to order a {{ data.pizzaType }} pizza?</h1>
+
+  <md-dialog-actions>
+    <button (click)="dialogRef.close('yes')">Yes</button>
+    <button md-dialog-close>No</button>
+  </md-dialog-actions>
+  `
+})
+export class PizzaDialog {
+  constructor(
+    public dialogRef: MdDialogRef<PizzaDialog>,
+    @Inject(MD_DIALOG_DATA) public data: any) { }
+}
+```

src/lib/dialog/dialog-config.ts

@@ -11,11 +11,6 @@ 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.
  */
@@ -38,7 +33,7 @@ export class MdDialogConfig {
   position?: DialogPosition;
 
   /** Data being injected into the child component. */
-  data?: MdDialogData;
+  data?: any;
 
   // TODO(jelbourn): add configuration for lifecycle hooks, ARIA labelling.
 }

src/lib/dialog/dialog-injector.ts

@@ -1,21 +1,21 @@
-import {Injector} from '@angular/core';
+import {Injector, OpaqueToken} from '@angular/core';
 import {MdDialogRef} from './dialog-ref';
-import {MdDialogData} from './dialog-config';
 
+export const MD_DIALOG_DATA = new OpaqueToken('MdDialogData');
 
 /** Custom injector type specifically for instantiating components with a dialog. */
 export class DialogInjector implements Injector {
   constructor(
+    private _parentInjector: Injector,
     private _dialogRef: MdDialogRef<any>,
-    private _data: MdDialogData,
-    private _parentInjector: Injector) { }
+    private _data: any) { }
 
   get(token: any, notFoundValue?: any): any {
     if (token === MdDialogRef) {
       return this._dialogRef;
     }
 
-    if (token === MdDialogData && this._data) {
+    if (token === MD_DIALOG_DATA && this._data) {
       return this._data;
     }
 

src/lib/dialog/dialog.spec.ts

@@ -7,14 +7,21 @@ import {
   TestBed,
   tick,
 } from '@angular/core/testing';
+import {NgModule,
+  Component,
+  Directive,
+  ViewChild,
+  ViewContainerRef,
+  Injector,
+  Inject,
+} from '@angular/core';
 import {By} from '@angular/platform-browser';
-import {NgModule, Component, Directive, ViewChild, ViewContainerRef, Injector} from '@angular/core';
 import {MdDialogModule} from './index';
 import {MdDialog} from './dialog';
 import {OverlayContainer} from '../core';
 import {MdDialogRef} from './dialog-ref';
 import {MdDialogContainer} from './dialog-container';
-import {MdDialogData} from './dialog-config';
+import {MD_DIALOG_DATA} from './dialog-injector';
 
 
 describe('MdDialog', () => {
@@ -254,8 +261,8 @@ describe('MdDialog', () => {
 
       let instance = dialog.open(DialogWithInjectedData, config).componentInstance;
 
-      expect(instance.data['stringParam']).toBe(config.data.stringParam);
-      expect(instance.data['dateParam']).toBe(config.data.dateParam);
+      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', () => {
@@ -502,7 +509,7 @@ class ComponentThatProvidesMdDialog {
 /** Simple component for testing ComponentPortal. */
 @Component({template: ''})
 class DialogWithInjectedData {
-  constructor(public data: MdDialogData) { }
+  constructor(@Inject(MD_DIALOG_DATA) public data: any) { }
 }
 
 // Create a real (non-test) NgModule as a workaround for

src/lib/dialog/dialog.ts

@@ -120,7 +120,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, config.data, userInjector || this._injector);
+    let dialogInjector = new DialogInjector(userInjector || this._injector, dialogRef, config.data);
 
     let contentPortal = new ComponentPortal(component, null, dialogInjector);
 

src/lib/dialog/index.ts

@@ -57,3 +57,4 @@ export * from './dialog-container';
 export * from './dialog-content-directives';
 export * from './dialog-config';
 export * from './dialog-ref';
+export {MD_DIALOG_DATA} from './dialog-injector';