Skip to content

Commit

Permalink
Switch to using an OpaqueToken.
Browse files Browse the repository at this point in the history
  • Loading branch information
crisbeto committed Jan 21, 2017
1 parent c819a32 commit ba4119b
Show file tree
Hide file tree
Showing 7 changed files with 46 additions and 38 deletions.
6 changes: 3 additions & 3 deletions src/demo-app/dialog/dialog-demo.ts
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -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) { }
}


Expand Down
41 changes: 23 additions & 18 deletions src/lib/dialog/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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. |
Expand Down Expand Up @@ -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:
Expand All @@ -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) { }
}
```
7 changes: 1 addition & 6 deletions src/lib/dialog/dialog-config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/
Expand All @@ -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.
}
10 changes: 5 additions & 5 deletions src/lib/dialog/dialog-injector.ts
Original file line number Diff line number Diff line change
@@ -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;
}

Expand Down
17 changes: 12 additions & 5 deletions src/lib/dialog/dialog.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down Expand Up @@ -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', () => {
Expand Down Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion src/lib/dialog/dialog.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down
1 change: 1 addition & 0 deletions src/lib/dialog/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';

0 comments on commit ba4119b

Please sign in to comment.