feat(dialog): add ability to open dialog with templateRef

src/demo-app/demo-app-module.ts

@@ -8,7 +8,14 @@ import {MaterialModule, OverlayContainer,
   FullscreenOverlayContainer} from '@angular/material';
 import {DEMO_APP_ROUTES} from './demo-app/routes';
 import {ProgressBarDemo} from './progress-bar/progress-bar-demo';
-import {JazzDialog, ContentElementDialog, DialogDemo, IFrameDialog} from './dialog/dialog-demo';
+import {
+  JazzDialog,
+  JazzDialogTemplateRef,
+  ContentElementDialog,
+  ContentElementTemplateRefDialog,
+  DialogDemo,
+  IFrameDialog
+} from './dialog/dialog-demo';
 import {RippleDemo} from './ripple/ripple-demo';
 import {IconDemo} from './icon/icon-demo';
 import {GesturesDemo} from './gestures/gestures-demo';
@@ -64,7 +71,9 @@ import {InputContainerDemo} from './input/input-container-demo';
     IconDemo,
     InputContainerDemo,
     JazzDialog,
+    JazzDialogTemplateRef,
     ContentElementDialog,
+    ContentElementTemplateRefDialog,
     IFrameDialog,
     ListDemo,
     LiveAnnouncerDemo,
@@ -100,7 +109,9 @@ import {InputContainerDemo} from './input/input-container-demo';
   entryComponents: [
     DemoApp,
     JazzDialog,
+    JazzDialogTemplateRef,
     ContentElementDialog,
+    ContentElementTemplateRefDialog,
     IFrameDialog,
     RotiniPanel,
     ScienceJoke,

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

@@ -1,7 +1,15 @@
 <h1>Dialog demo</h1>
 
-<button md-raised-button color="primary" (click)="openJazz()" [disabled]="dialogRef">Open dialog</button>
-<button md-raised-button color="accent" (click)="openContentElement()">Open dialog with content elements</button>
+<div class="demo-button-group">
+  <button md-raised-button color="primary" (click)="openJazz()" [disabled]="dialogRef">Open dialog</button>
+  <button md-raised-button color="accent" (click)="openContentElement()">Open dialog with content elements</button>
+</div>
+
+<div class="demo-button-group">
+  <button md-raised-button color="primary" (click)="openJazzUsingTemplateRef()" [disabled]="dialogTemplateRef">Open dialog using TemplateRef</button>
+  <button md-raised-button color="accent" (click)="openContentElementUsingTemplateRef()">Open dialog using TemplateRef with content elements</button>
+</div>
+
 
 <md-card class="demo-dialog-card">
   <md-card-content>
@@ -51,3 +59,12 @@ <h2>Other options</h2>
 </md-card>
 
 <p>Last close result: {{lastCloseResult}}</p>
+
+<template #jazzDialogRef>
+  <demo-jazz-dialog-template-ref (close)="closeJazzUsingTemplateRef($event)"></demo-jazz-dialog-template-ref>
+</template>
+
+
+<template #contentElementRef>
+  <demo-content-element-template-ref-dialog (close)="closeContentElementUsingTemplateRef()" [actionsAlignment]="actionsAlignment"></demo-content-element-template-ref-dialog>
+</template>

src/demo-app/dialog/dialog-demo.scss

@@ -6,3 +6,7 @@
   max-width: 350px;
   margin: 20px 0;
 }
+
+.demo-button-group {
+  margin-bottom: 20px;
+}

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

@@ -1,4 +1,12 @@
-import {Component, Inject} from '@angular/core';
+import {
+  Component,
+  Inject,
+  Input,
+  Output,
+  ViewChild,
+  TemplateRef,
+  EventEmitter
+} from '@angular/core';
 import {DOCUMENT} from '@angular/platform-browser';
 import {MdDialog, MdDialogRef, MdDialogConfig} from '@angular/material';
 
@@ -9,7 +17,15 @@ import {MdDialog, MdDialogRef, MdDialogConfig} from '@angular/material';
   styleUrls: ['dialog-demo.css'],
 })
 export class DialogDemo {
+  @ViewChild('jazzDialogRef')
+  jazzDialogRef: TemplateRef<any>;
+
+  @ViewChild('contentElementRef')
+  contentElementRef: TemplateRef<any>;
+
   dialogRef: MdDialogRef<JazzDialog>;
+  dialogTemplateRef: MdDialogRef<any>;
+  dialogContentTemplateRef: MdDialogRef<any>;
   lastCloseResult: string;
   actionsAlignment: string;
   config: MdDialogConfig = {
@@ -41,16 +57,43 @@ export class DialogDemo {
   openJazz() {
     this.dialogRef = this.dialog.open(JazzDialog, this.config);
 
-    this.dialogRef.afterClosed().subscribe(result => {
+    this.dialogRef.afterClosed().first().subscribe(result => {
       this.lastCloseResult = result;
       this.dialogRef = null;
     });
   }
 
+  openJazzUsingTemplateRef() {
+    this.dialogTemplateRef = this.dialog.openFromTemplate(this.jazzDialogRef, this.config);
+
+    this.dialogTemplateRef.afterClosed().first().subscribe(() => {
+      this.dialogTemplateRef = null;
+    });
+  }
+
+  closeJazzUsingTemplateRef(result: string) {
+    this.lastCloseResult = result;
+
+    this.dialogTemplateRef.close();
+  }
+
   openContentElement() {
     let dialogRef = this.dialog.open(ContentElementDialog, this.config);
     dialogRef.componentInstance.actionsAlignment = this.actionsAlignment;
   }
+
+  openContentElementUsingTemplateRef() {
+    this.dialogContentTemplateRef = this.dialog.openFromTemplate(
+      this.contentElementRef,
+      this.config
+    );
+  }
+
+  closeContentElementUsingTemplateRef() {
+    if (this.dialogContentTemplateRef) {
+      this.dialogContentTemplateRef.close();
+    }
+  }
 }
 
 
@@ -69,6 +112,24 @@ export class JazzDialog {
 }
 
 
+@Component({
+  selector: 'demo-jazz-dialog-template-ref',
+  template: `
+  <p>It's Jazz!</p>
+  <p><label>How much? <input #howMuch></label></p>
+  <p> {{ jazzMessage }} </p>
+  <button type="button" (click)="close.emit(howMuch.value)">Close dialog</button>`
+})
+export class JazzDialogTemplateRef {
+  jazzMessage = 'Jazzy jazz jazz';
+
+  @Output()
+  close = new EventEmitter<string>(false);
+
+  constructor() { }
+}
+
+
 @Component({
   selector: 'demo-content-element-dialog',
   styles: [
@@ -98,13 +159,12 @@ export class JazzDialog {
         md-raised-button
         color="primary"
         md-dialog-close>Close</button>
-
       <a
         md-button
         color="primary"
         href="https://en.wikipedia.org/wiki/Neptune"
         target="_blank">Read more on Wikipedia</a>
-      
+
       <button
         md-button
         color="secondary"
@@ -123,6 +183,64 @@ export class ContentElementDialog {
   }
 }
 
+
+@Component({
+  selector: 'demo-content-element-template-ref-dialog',
+  styles: [
+    `img {
+      max-width: 100%;
+    }`
+  ],
+  template: `
+    <h2 md-dialog-title>Neptune</h2>
+
+    <md-dialog-content>
+      <img src="https://upload.wikimedia.org/wikipedia/commons/5/56/Neptune_Full.jpg"/>
+
+      <p>
+        Neptune is the eighth and farthest known planet from the Sun in the Solar System. In the
+        Solar System, it is the fourth-largest planet by diameter, the third-most-massive planet,
+        and the densest giant planet. Neptune is 17 times the mass of Earth and is slightly more
+        massive than its near-twin Uranus, which is 15 times the mass of Earth and slightly larger
+        than Neptune. Neptune orbits the Sun once every 164.8 years at an average distance of 30.1
+        astronomical units (4.50×109 km). It is named after the Roman god of the sea and has the
+        astronomical symbol ♆, a stylised version of the god Neptune's trident.
+      </p>
+    </md-dialog-content>
+
+    <md-dialog-actions [attr.align]="actionsAlignment">
+      <button
+        md-raised-button
+        color="primary"
+        (click)="!!close.emit()">Close</button>
+      <a
+        md-button
+        color="primary"
+        href="https://en.wikipedia.org/wiki/Neptune"
+        target="_blank">Read more on Wikipedia</a>
+
+      <button
+        md-button
+        color="secondary"
+        (click)="showInStackedDialog()">
+        Show in Dialog</button>
+    </md-dialog-actions>
+  `
+})
+export class ContentElementTemplateRefDialog {
+  @Input()
+  actionsAlignment: string;
+
+  @Output()
+  close = new EventEmitter<void>();
+
+  constructor(public dialog: MdDialog) { }
+
+  showInStackedDialog() {
+    this.dialog.open(IFrameDialog);
+  }
+}
+
 @Component({
   selector: 'demo-iframe-dialog',
   styles: [

src/lib/dialog/dialog-container.ts

@@ -5,6 +5,7 @@ import {
   ViewEncapsulation,
   NgZone,
   OnDestroy,
+  ViewContainerRef,
 } from '@angular/core';
 import {BasePortalHost, ComponentPortal, PortalHostDirective, TemplatePortal} from '../core';
 import {MdDialogConfig} from './dialog-config';
@@ -46,8 +47,13 @@ export class MdDialogContainer extends BasePortalHost implements OnDestroy {
   /** Reference to the open dialog. */
   dialogRef: MdDialogRef<any>;
 
-  constructor(private _ngZone: NgZone) {
+  /** Exposes ViewContainerRef */
+  containerRef: ViewContainerRef;
+
+  constructor(private _viewContainerRef: ViewContainerRef, private _ngZone: NgZone) {
     super();
+
+    this.containerRef = this._viewContainerRef;
   }
 
   /**
@@ -61,20 +67,21 @@ 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');
+    if (this._portalHost.hasAttached()) {
+      throw new MdDialogContentAlreadyAttachedError();
+    }
+
+    let attachResult = this._portalHost.attachTemplatePortal(portal);
+
+    this._focusFirstTabbableElement();
+
+    return attachResult;
   }
 
   /**
@@ -85,6 +92,8 @@ export class MdDialogContainer extends BasePortalHost implements OnDestroy {
     if (!this.dialogConfig.disableClose) {
       this.dialogRef.close();
     }
+
+    this.dialogRef.escapePress.next();
   }
 
   ngOnDestroy() {
@@ -95,4 +104,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-ref.ts

@@ -14,10 +14,18 @@ export class MdDialogRef<T> {
   /** The instance of component opened into the dialog. */
   componentInstance: T;
 
+  /** Expose overlay backdrop click event */
+  backdropClick: Observable<void>;
+
+  /** Subject for notifying the user that esc key way pressed */
+  escapePress = new Subject<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.