WIP: feature(dialog): add ability to open dialog with portal

src/demo-app/dialog/dialog-demo.html

@@ -51,3 +51,11 @@ <h2>Other options</h2>
 </md-card>
 
 <p>Last close result: {{lastCloseResult}}</p>
+
+
+<md-card class="demo-dialog-card">
+  <button md-raised-button color="primary" (click)="openElementDialog()">Open element dialog</button>
+  <md-dialog [open]="elementDialogState" (close)="closeElementDialog()">
+    whatup
+  </md-dialog>
+</md-card>

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

@@ -10,6 +10,7 @@ import {MdDialog, MdDialogRef, MdDialogConfig} from '@angular/material';
 })
 export class DialogDemo {
   dialogRef: MdDialogRef<JazzDialog>;
+  elementDialogState: boolean = false;
   lastCloseResult: string;
   actionsAlignment: string;
   config: MdDialogConfig = {
@@ -51,6 +52,14 @@ export class DialogDemo {
     let dialogRef = this.dialog.open(ContentElementDialog, this.config);
     dialogRef.componentInstance.actionsAlignment = this.actionsAlignment;
   }
+
+  openElementDialog() {
+    this.elementDialogState = true;
+  }
+
+  closeElementDialog() {
+    this.elementDialogState = false;
+  }
 }
 
 
@@ -104,7 +113,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"

src/lib/dialog/dialog-container.ts

@@ -4,7 +4,7 @@ import {
   ViewChild,
   ViewEncapsulation,
   NgZone,
-  OnDestroy,
+  OnDestroy
 } from '@angular/core';
 import {BasePortalHost, ComponentPortal, PortalHostDirective, TemplatePortal} from '../core';
 import {MdDialogConfig} from './dialog-config';
@@ -61,20 +61,22 @@ export class MdDialogContainer extends BasePortalHost implements OnDestroy {
 
     let attachResult = this._portalHost.attachComponentPortal(portal);
 
-    // If were to attempt to focus immediately, then the content of the dialog would not yet be
-    // ready in instances where change detection has to run first. To deal with this, we simply
-    // wait for the microtask queue to be empty.
-    this._ngZone.onMicrotaskEmpty.first().subscribe(() => {
-      this._elementFocusedBeforeDialogWasOpened = document.activeElement;
-      this._focusTrap.focusFirstTabbableElement();
-    });
+    this._focusFirstTabbableElement();
 
     return attachResult;
   }
 
   /** @docs-private */
-  attachTemplatePortal(portal: TemplatePortal): Map<string, any> {
-    throw Error('Not yet implemented');
+  attachTemplatePortal(portal: TemplatePortal) {
+    if (this._portalHost.hasAttached()) {
+      throw new MdDialogContentAlreadyAttachedError();
+    }
+
+    let attachResult = this._portalHost.attachTemplatePortal(portal);
+
+    this._focusFirstTabbableElement();
+
+    return attachResult;
   }
 
   /**
@@ -95,4 +97,14 @@ export class MdDialogContainer extends BasePortalHost implements OnDestroy {
       (this._elementFocusedBeforeDialogWasOpened as HTMLElement).focus();
     });
   }
+
+  private _focusFirstTabbableElement() {
+    // If were to attempt to focus immediately, then the content of the dialog would not yet be
+    // ready in instances where change detection has to run first. To deal with this, we simply
+    // wait for the microtask queue to be empty.
+    this._ngZone.onMicrotaskEmpty.first().subscribe(() => {
+      this._elementFocusedBeforeDialogWasOpened = document.activeElement;
+      this._focusTrap.focusFirstTabbableElement();
+    });
+  }
 }

src/lib/dialog/dialog-element.html

@@ -0,0 +1,3 @@
+<template mdDialogPortal>
+  <ng-content></ng-content>
+</template>

src/lib/dialog/dialog-element.ts

@@ -0,0 +1,62 @@
+import {
+  Component,
+  Directive,
+  TemplateRef,
+  ViewContainerRef,
+  Input,
+  ViewChild,
+  Output,
+  EventEmitter,
+  ChangeDetectionStrategy
+} from '@angular/core';
+import {MdDialog} from './dialog';
+import {MdDialogRef} from './dialog-ref';
+import {TemplatePortal} from '../core';
+
+@Directive({
+  selector: '[mdDialogPortal]'
+})
+export class MdDialogPortal extends TemplatePortal {
+  constructor(templateRef: TemplateRef<any>, viewContainerRef: ViewContainerRef) {
+    super(templateRef, viewContainerRef);
+  }
+}
+
+@Component({
+  selector: 'md-dialog',
+  templateUrl: './dialog-element.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class MdDialogElement {
+  dialog: MdDialogRef<any>;
+
+  @Output()
+  close = new EventEmitter<void>(false);
+
+  @ViewChild(MdDialogPortal)
+  dialogPortal: MdDialogPortal;
+
+  @Input()
+  set open(state: boolean) {
+    if (state) {
+      setTimeout(() => {
+
+        this.dialog = this._dialog.openFromPortal(this.dialogPortal, {
+          disableClose: true
+        });
+
+        this.dialog.backdropClick$.subscribe(() => {
+          this.close.emit();
+        });
+
+      });
+
+
+    } else if (this.dialog) {
+      this.dialog.close();
+    }
+  }
+
+  constructor(private _dialog: MdDialog) {}
+}
+

src/lib/dialog/dialog-ref.ts

@@ -14,10 +14,14 @@ export class MdDialogRef<T> {
   /** The instance of component opened into the dialog. */
   componentInstance: T;
 
+  backdropClick$: Observable<void>;
+
   /** Subject for notifying the user that the dialog has finished closing. */
   private _afterClosed: Subject<any> = new Subject();
 
-  constructor(private _overlayRef: OverlayRef) { }
+  constructor(private _overlayRef: OverlayRef) {
+     this.backdropClick$ = this._overlayRef.backdropClick();
+  }
 
   /**
    * Close the dialog.

src/lib/dialog/dialog.ts

@@ -1,8 +1,15 @@
-import {Injector, ComponentRef, Injectable, Optional, SkipSelf} from '@angular/core';
+import {Injector, ComponentRef, Injectable, Optional, SkipSelf, NgZone} from '@angular/core';
 import {Observable} from 'rxjs/Observable';
 import {Subject} from 'rxjs/Subject';
 
-import {Overlay, OverlayRef, ComponentType, OverlayState, ComponentPortal} from '../core';
+import {
+  Overlay,
+  OverlayRef,
+  ComponentType,
+  OverlayState,
+  ComponentPortal,
+  TemplatePortal
+} from '../core';
 import {extendObject} from '../core/util/object-extend';
 
 import {DialogInjector} from './dialog-injector';
@@ -49,8 +56,37 @@ export class MdDialog {
   constructor(
       private _overlay: Overlay,
       private _injector: Injector,
+      private _zone: NgZone,
       @Optional() @SkipSelf() private _parentDialog: MdDialog) { }
 
+  /**
+   * Opens a modal dialog containing the given TemplateRef.
+   * @param TemplateRef to load into the dialog
+   * @param config Extra configuration options.
+   * @returns Reference to the newly-opened dialog.
+   */
+  openFromPortal(templatePortal: TemplatePortal, config?: MdDialogConfig) {
+    config = _applyConfigDefaults(config);
+
+    let overlayRef = this._createOverlay(config);
+
+    let dialogContainer = this._attachDialogContainer(overlayRef, config);
+    let dialogRef = this._attachDialogContent(
+      dialogContainer,
+      overlayRef,
+      undefined,
+      templatePortal,
+      config
+    );
+
+    this._openDialogs.push(dialogRef);
+    dialogRef.afterClosed().subscribe(() => this._removeOpenDialog(dialogRef));
+    this._afterOpen.next(dialogRef);
+
+    return dialogRef;
+
+  }
+
   /**
    * Opens a modal dialog containing the given component.
    * @param component Type of the component to load into the load.
@@ -62,7 +98,13 @@ export class MdDialog {
 
     let overlayRef = this._createOverlay(config);
     let dialogContainer = this._attachDialogContainer(overlayRef, config);
-    let dialogRef = this._attachDialogContent(component, dialogContainer, overlayRef, config);
+    let dialogRef = this._attachDialogContent(
+      dialogContainer,
+      overlayRef,
+      component,
+      undefined,
+      config
+    );
 
     this._openDialogs.push(dialogRef);
     dialogRef.afterClosed().subscribe(() => this._removeOpenDialog(dialogRef));
@@ -121,9 +163,10 @@ export class MdDialog {
    * @returns A promise resolving to the MdDialogRef that should be returned to the user.
    */
   private _attachDialogContent<T>(
-      component: ComponentType<T>,
       dialogContainer: MdDialogContainer,
       overlayRef: OverlayRef,
+      component?: ComponentType<T>,
+      templatePortal?: TemplatePortal,
       config?: MdDialogConfig): MdDialogRef<T> {
     // Create a reference to the dialog we're creating in order to give the user a handle
     // to modify and close it.
@@ -143,10 +186,16 @@ export class MdDialog {
     let userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;
     let dialogInjector = new DialogInjector(dialogRef, userInjector || this._injector);
 
-    let contentPortal = new ComponentPortal(component, null, dialogInjector);
+    if (component) {
+      let contentPortal = new ComponentPortal(component, null, dialogInjector);
 
-    let contentRef = dialogContainer.attachComponentPortal(contentPortal);
-    dialogRef.componentInstance = contentRef.instance;
+      let contentRef = dialogContainer.attachComponentPortal(contentPortal);
+      dialogRef.componentInstance = contentRef.instance;
+    }
+
+    if (templatePortal) {
+      dialogContainer.attachTemplatePortal(templatePortal);
+    }
 
     return dialogRef;
   }

src/lib/dialog/index.ts

@@ -7,14 +7,14 @@ import {
 } from '../core';
 import {MdDialog} from './dialog';
 import {MdDialogContainer} from './dialog-container';
+import {MdDialogElement, MdDialogPortal} from './dialog-element';
 import {
   MdDialogClose,
   MdDialogContent,
   MdDialogTitle,
   MdDialogActions
 } from './dialog-content-directives';
 
-
 @NgModule({
   imports: [
     OverlayModule,
@@ -28,6 +28,8 @@ import {
     MdDialogTitle,
     MdDialogContent,
     MdDialogActions,
+    MdDialogElement,
+    MdDialogPortal,
     CompatibilityModule,
   ],
   declarations: [
@@ -36,6 +38,8 @@ import {
     MdDialogTitle,
     MdDialogActions,
     MdDialogContent,
+    MdDialogElement,
+    MdDialogPortal,
   ],
   providers: [
     MdDialog,
@@ -53,6 +57,7 @@ export class MdDialogModule {
 }
 
 export * from './dialog';
+export * from './dialog-element';
 export * from './dialog-container';
 export * from './dialog-content-directives';
 export * from './dialog-config';