diff --git a/src/demo-app/dialog/dialog-demo.ts b/src/demo-app/dialog/dialog-demo.ts
index f82ecbfbce4c..5ccd67a0ec68 100644
--- a/src/demo-app/dialog/dialog-demo.ts
+++ b/src/demo-app/dialog/dialog-demo.ts
@@ -72,12 +72,29 @@ export class DialogDemo {
It's Jazz!
{{ data.message }}
- `
+
+ `
})
export class JazzDialog {
+ private _dimesionToggle = false;
+
constructor(
public dialogRef: MdDialogRef,
@Inject(MD_DIALOG_DATA) public data: any) { }
+
+ togglePosition(): void {
+ this._dimesionToggle = !this._dimesionToggle;
+
+ if (this._dimesionToggle) {
+ this.dialogRef
+ .updateSize('500px', '500px')
+ .updatePosition({ top: '25px', left: '25px' });
+ } else {
+ this.dialogRef
+ .updateSize()
+ .updatePosition();
+ }
+ }
}
diff --git a/src/lib/core/core.ts b/src/lib/core/core.ts
index ac0e148798dd..46d33184499d 100644
--- a/src/lib/core/core.ts
+++ b/src/lib/core/core.ts
@@ -53,6 +53,7 @@ export {
OverlayOrigin,
OverlayModule,
} from './overlay/overlay-directives';
+export * from './overlay/position/global-position-strategy';
export * from './overlay/position/connected-position-strategy';
export * from './overlay/position/connected-position';
export {ScrollDispatcher} from './overlay/scroll/scroll-dispatcher';
diff --git a/src/lib/dialog/dialog-ref.ts b/src/lib/dialog/dialog-ref.ts
index fa70a0b78741..f8ad6488e623 100644
--- a/src/lib/dialog/dialog-ref.ts
+++ b/src/lib/dialog/dialog-ref.ts
@@ -1,4 +1,5 @@
-import {OverlayRef} from '../core';
+import {OverlayRef, GlobalPositionStrategy} from '../core';
+import {DialogPosition} from './dialog-config';
import {Observable} from 'rxjs/Observable';
import {Subject} from 'rxjs/Subject';
import {MdDialogContainer, MdDialogContainerAnimationState} from './dialog-container';
@@ -50,4 +51,44 @@ export class MdDialogRef {
afterClosed(): Observable {
return this._afterClosed.asObservable();
}
+
+ /**
+ * Updates the dialog's position.
+ * @param position New dialog position.
+ */
+ updatePosition(position?: DialogPosition): this {
+ let strategy = this._getPositionStrategy();
+
+ if (position && (position.left || position.right)) {
+ position.left ? strategy.left(position.left) : strategy.right(position.right);
+ } else {
+ strategy.centerHorizontally();
+ }
+
+ if (position && (position.top || position.bottom)) {
+ position.top ? strategy.top(position.top) : strategy.bottom(position.bottom);
+ } else {
+ strategy.centerVertically();
+ }
+
+ this._overlayRef.updatePosition();
+
+ return this;
+ }
+
+ /**
+ * Updates the dialog's width and height.
+ * @param width New width of the dialog.
+ * @param height New height of the dialog.
+ */
+ updateSize(width = 'auto', height = 'auto'): this {
+ this._getPositionStrategy().width(width).height(height);
+ this._overlayRef.updatePosition();
+ return this;
+ }
+
+ /** Fetches the position strategy object from the overlay ref. */
+ private _getPositionStrategy(): GlobalPositionStrategy {
+ return this._overlayRef.getState().positionStrategy as GlobalPositionStrategy;
+ }
}
diff --git a/src/lib/dialog/dialog.spec.ts b/src/lib/dialog/dialog.spec.ts
index 53e67ca2066a..d1e547888af4 100644
--- a/src/lib/dialog/dialog.spec.ts
+++ b/src/lib/dialog/dialog.spec.ts
@@ -274,6 +274,38 @@ describe('MdDialog', () => {
expect(overlayPane.style.marginRight).toBe('125px');
});
+ it('should allow for the position to be updated', () => {
+ let dialogRef = dialog.open(PizzaMsg, {
+ position: {
+ left: '250px'
+ }
+ });
+
+ viewContainerFixture.detectChanges();
+
+ let overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
+
+ expect(overlayPane.style.marginLeft).toBe('250px');
+
+ dialogRef.updatePosition({ left: '500px' });
+
+ expect(overlayPane.style.marginLeft).toBe('500px');
+ });
+
+ it('should allow for the dimensions to be updated', () => {
+ let dialogRef = dialog.open(PizzaMsg, { width: '100px' });
+
+ viewContainerFixture.detectChanges();
+
+ let overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
+
+ expect(overlayPane.style.width).toBe('100px');
+
+ dialogRef.updateSize('200px');
+
+ expect(overlayPane.style.width).toBe('200px');
+ });
+
it('should close all of the dialogs', async(() => {
dialog.open(PizzaMsg);
dialog.open(PizzaMsg);
diff --git a/src/lib/dialog/dialog.ts b/src/lib/dialog/dialog.ts
index 3cc1c57ebe67..3ef37383b4fe 100644
--- a/src/lib/dialog/dialog.ts
+++ b/src/lib/dialog/dialog.ts
@@ -92,14 +92,27 @@ export class MdDialog {
/**
* Creates the overlay into which the dialog will be loaded.
- * @param dialogConfig The dialog configuration.
+ * @param config The dialog configuration.
* @returns A promise resolving to the OverlayRef for the created overlay.
*/
- private _createOverlay(dialogConfig: MdDialogConfig): OverlayRef {
- let overlayState = this._getOverlayState(dialogConfig);
+ private _createOverlay(config: MdDialogConfig): OverlayRef {
+ let overlayState = this._getOverlayState(config);
return this._overlay.create(overlayState);
}
+ /**
+ * Creates an overlay state from a dialog config.
+ * @param dialogConfig The dialog configuration.
+ * @returns The overlay configuration.
+ */
+ private _getOverlayState(dialogConfig: MdDialogConfig): OverlayState {
+ let overlayState = new OverlayState();
+ overlayState.hasBackdrop = true;
+ overlayState.positionStrategy = this._overlay.position().global();
+
+ return overlayState;
+ }
+
/**
* Attaches an MdDialogContainer to a dialog's already-created overlay.
* @param overlay Reference to the dialog's underlying overlay.
@@ -129,10 +142,11 @@ export class MdDialog {
componentOrTemplateRef: ComponentType | TemplateRef,
dialogContainer: MdDialogContainer,
overlayRef: OverlayRef,
- config?: MdDialogConfig): MdDialogRef {
+ config: MdDialogConfig): MdDialogRef {
// Create a reference to the dialog we're creating in order to give the user a handle
// to modify and close it.
- let dialogRef = new MdDialogRef(overlayRef, dialogContainer) as MdDialogRef;
+
+ let dialogRef = new MdDialogRef(overlayRef, dialogContainer);
if (!config.disableClose) {
// When the dialog backdrop is clicked, we want to close it.
@@ -153,37 +167,11 @@ export class MdDialog {
dialogRef.componentInstance = contentRef.instance;
}
- return dialogRef;
- }
-
- /**
- * Creates an overlay state from a dialog config.
- * @param dialogConfig The dialog configuration.
- * @returns The overlay configuration.
- */
- private _getOverlayState(dialogConfig: MdDialogConfig): OverlayState {
- let state = new OverlayState();
- let strategy = this._overlay.position().global();
- let position = dialogConfig.position;
-
- state.hasBackdrop = true;
- state.positionStrategy = strategy;
-
- if (position && (position.left || position.right)) {
- position.left ? strategy.left(position.left) : strategy.right(position.right);
- } else {
- strategy.centerHorizontally();
- }
-
- if (position && (position.top || position.bottom)) {
- position.top ? strategy.top(position.top) : strategy.bottom(position.bottom);
- } else {
- strategy.centerVertically();
- }
-
- strategy.width(dialogConfig.width).height(dialogConfig.height);
+ dialogRef
+ .updateSize(config.width, config.height)
+ .updatePosition(config.position);
- return state;
+ return dialogRef;
}
/**
@@ -221,10 +209,10 @@ export class MdDialog {
/**
* Applies default options to the dialog config.
- * @param dialogConfig Config to be modified.
+ * @param config Config to be modified.
* @returns The new configuration object.
*/
-function _applyConfigDefaults(dialogConfig: MdDialogConfig): MdDialogConfig {
- return extendObject(new MdDialogConfig(), dialogConfig);
+function _applyConfigDefaults(config: MdDialogConfig): MdDialogConfig {
+ return extendObject(new MdDialogConfig(), config);
}