Switch to using an OpaqueToken.

Author: crisbeto

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

@@ -1,6 +1,5 @@
 import {Component, Inject} from '@angular/core';
-import {DOCUMENT} from '@angular/platform-browser';
-import {MdDialog, MdDialogRef, MdDialogConfig, MdDialogData} from '@angular/material';
+import {MdDialog, MdDialogRef, MdDialogConfig, MD_DIALOG_DATA} from '@angular/material';
 
 
 @Component({
@@ -69,7 +68,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/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', () => {
@@ -283,8 +290,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', () => {
@@ -531,7 +538,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

@@ -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, 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';