From ad9617f8e3353e3a435263ffd44aec35dbfa6934 Mon Sep 17 00:00:00 2001
From: Ales Rechtorik <ales@f13.cz>
Date: Sat, 28 Jan 2017 22:48:59 +0100
Subject: [PATCH 1/6] add ability to open dialog with templateRef

---
 src/demo-app/demo-app-module.ts      |  10 ++-
 src/demo-app/dialog/dialog-demo.html |  20 ++++-
 src/demo-app/dialog/dialog-demo.scss |   4 +
 src/demo-app/dialog/dialog-demo.ts   | 116 ++++++++++++++++++++++++++-
 src/lib/dialog/dialog-container.ts   |  41 +++++++---
 src/lib/dialog/dialog-ref.ts         |  10 ++-
 src/lib/dialog/dialog.spec.ts        |  85 +++++++++++++++++++-
 src/lib/dialog/dialog.ts             |  57 ++++++++++---
 8 files changed, 312 insertions(+), 31 deletions(-)

diff --git a/src/demo-app/demo-app-module.ts b/src/demo-app/demo-app-module.ts
index 47b54dbb1036..ffab8cd6399a 100644
--- a/src/demo-app/demo-app-module.ts
+++ b/src/demo-app/demo-app-module.ts
@@ -8,7 +8,13 @@ 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,
+  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,6 +70,7 @@ import {InputContainerDemo} from './input/input-container-demo';
     IconDemo,
     InputContainerDemo,
     JazzDialog,
+    JazzDialogTemplateRef,
     ContentElementDialog,
     IFrameDialog,
     ListDemo,
@@ -100,6 +107,7 @@ import {InputContainerDemo} from './input/input-container-demo';
   entryComponents: [
     DemoApp,
     JazzDialog,
+    JazzDialogTemplateRef,
     ContentElementDialog,
     IFrameDialog,
     RotiniPanel,
diff --git a/src/demo-app/dialog/dialog-demo.html b/src/demo-app/dialog/dialog-demo.html
index 53734bbbfdff..4e26a2d83ec9 100644
--- a/src/demo-app/dialog/dialog-demo.html
+++ b/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,11 @@ <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-dialog [actionsAlignment]="actionsAlignment"></demo-content-element-dialog>
diff --git a/src/demo-app/dialog/dialog-demo.scss b/src/demo-app/dialog/dialog-demo.scss
index 6f7f4cac254a..8d1f33274c67 100644
--- a/src/demo-app/dialog/dialog-demo.scss
+++ b/src/demo-app/dialog/dialog-demo.scss
@@ -6,3 +6,7 @@
   max-width: 350px;
   margin: 20px 0;
 }
+
+.demo-button-group {
+  margin-bottom: 20px;
+}
diff --git a/src/demo-app/dialog/dialog-demo.ts b/src/demo-app/dialog/dialog-demo.ts
index 5e91c097f9aa..18a5331b3f4b 100644
--- a/src/demo-app/dialog/dialog-demo.ts
+++ b/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,14 @@ import {MdDialog, MdDialogRef, MdDialogConfig} from '@angular/material';
   styleUrls: ['dialog-demo.css'],
 })
 export class DialogDemo {
+  @ViewChild('jazzDialogRef')
+  jazzDialogRef: TemplateRef<JazzDialogTemplateRef>;
+
+  @ViewChild('contentElementRef')
+  contentElementRef: TemplateRef<ContentElementDialog>;
+
   dialogRef: MdDialogRef<JazzDialog>;
+  dialogTemplateRef: MdDialogRef<JazzDialogTemplateRef>;
   lastCloseResult: string;
   actionsAlignment: string;
   config: MdDialogConfig = {
@@ -41,16 +56,34 @@ 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.openFromTemplateRef(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.dialog.openFromTemplateRef(this.contentElementRef, this.config);
+  }
 }
 
 
@@ -69,6 +102,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: [
@@ -94,17 +145,75 @@ export class JazzDialog {
     </md-dialog-content>
 
     <md-dialog-actions [attr.align]="actionsAlignment">
+      <!--
       <button
         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"
+        (click)="showInStackedDialog()">
+        Show in Dialog</button>
+    </md-dialog-actions>
+  `
+})
+export class ContentElementDialog {
+  @Input()
+  actionsAlignment: string;
 
+  constructor(public dialog: MdDialog) { }
+
+  showInStackedDialog() {
+    this.dialog.open(IFrameDialog);
+  }
+}
+
+
+@Component({
+  selector: 'demo-content-element-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"
+        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"
@@ -114,6 +223,7 @@ export class JazzDialog {
   `
 })
 export class ContentElementDialog {
+  @Input()
   actionsAlignment: string;
 
   constructor(public dialog: MdDialog) { }
diff --git a/src/lib/dialog/dialog-container.ts b/src/lib/dialog/dialog-container.ts
index 6004809e8e05..7a496e38613e 100644
--- a/src/lib/dialog/dialog-container.ts
+++ b/src/lib/dialog/dialog-container.ts
@@ -5,6 +5,8 @@ import {
   ViewEncapsulation,
   NgZone,
   OnDestroy,
+  ViewContainerRef,
+  TemplateRef,
 } from '@angular/core';
 import {BasePortalHost, ComponentPortal, PortalHostDirective, TemplatePortal} from '../core';
 import {MdDialogConfig} from './dialog-config';
@@ -46,7 +48,7 @@ export class MdDialogContainer extends BasePortalHost implements OnDestroy {
   /** Reference to the open dialog. */
   dialogRef: MdDialogRef<any>;
 
-  constructor(private _ngZone: NgZone) {
+  constructor(private _viewContainerRef: ViewContainerRef, private _ngZone: NgZone) {
     super();
   }
 
@@ -61,20 +63,27 @@ 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;
+  }
+
+  attachTemplateRef<T>(templateRef: TemplateRef<T>) {
+    const portal = new TemplatePortal(templateRef, this._viewContainerRef);
+
+    this.attachTemplatePortal(portal);
   }
 
   /**
@@ -85,6 +94,8 @@ export class MdDialogContainer extends BasePortalHost implements OnDestroy {
     if (!this.dialogConfig.disableClose) {
       this.dialogRef.close();
     }
+
+    this.dialogRef.escapePressed.next();
   }
 
   ngOnDestroy() {
@@ -95,4 +106,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();
+    });
+  }
 }
diff --git a/src/lib/dialog/dialog-ref.ts b/src/lib/dialog/dialog-ref.ts
index bd9a45df84ac..29cb4f904b64 100644
--- a/src/lib/dialog/dialog-ref.ts
+++ b/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 */
+  backdropClicked: Observable<void>;
+
+  /** Subject for notifying the user that esc key way pressed */
+  escapePressed = 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.backdropClicked = this._overlayRef.backdropClick();
+  }
 
   /**
    * Close the dialog.
diff --git a/src/lib/dialog/dialog.spec.ts b/src/lib/dialog/dialog.spec.ts
index e4196924deaa..75a4964c2f12 100644
--- a/src/lib/dialog/dialog.spec.ts
+++ b/src/lib/dialog/dialog.spec.ts
@@ -8,7 +8,15 @@ import {
   tick,
 } from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
-import {NgModule, Component, Directive, ViewChild, ViewContainerRef, Injector} from '@angular/core';
+import {
+  NgModule,
+  Component,
+  Directive,
+  ViewChild,
+  ViewContainerRef,
+  Injector,
+  TemplateRef
+} from '@angular/core';
 import {MdDialogModule} from './index';
 import {MdDialog} from './dialog';
 import {OverlayContainer} from '../core';
@@ -64,6 +72,23 @@ describe('MdDialog', () => {
     expect(dialogContainerElement.getAttribute('role')).toBe('dialog');
   });
 
+  it('should open a dialog with a templateRef', () => {
+    const pizzaMsgContainer = TestBed.createComponent(PizzaMsgContainer);
+
+    viewContainerFixture.detectChanges();
+
+    dialog.openFromTemplateRef(pizzaMsgContainer.componentInstance.pizzaRef);
+
+    viewContainerFixture.detectChanges();
+
+    expect(overlayContainerElement.textContent).toContain('Pizza');
+
+    viewContainerFixture.detectChanges();
+    let dialogContainerElement = overlayContainerElement.querySelector('md-dialog-container');
+    expect(dialogContainerElement.getAttribute('role')).toBe('dialog');
+  });
+
+
   it('should use injector from viewContainerRef for DialogInjector', () => {
     let dialogRef = dialog.open(PizzaMsg, {
       viewContainerRef: testViewContainerRef
@@ -120,7 +145,6 @@ describe('MdDialog', () => {
     expect(overlayContainerElement.querySelector('md-dialog-container')).toBeNull();
   });
 
-
   it('should close a dialog via the escape key', () => {
     dialog.open(PizzaMsg, {
       viewContainerRef: testViewContainerRef
@@ -137,6 +161,28 @@ describe('MdDialog', () => {
     expect(overlayContainerElement.querySelector('md-dialog-container')).toBeNull();
   });
 
+  it('should notify the user that escape key was pressed', () => {
+    let dialogRef = dialog.open(PizzaMsg, {
+      viewContainerRef: testViewContainerRef
+    });
+
+    viewContainerFixture.detectChanges();
+
+    let dialogContainer: MdDialogContainer =
+        viewContainerFixture.debugElement.query(By.directive(MdDialogContainer)).componentInstance;
+
+    let pressed = false;
+
+    dialogRef.escapePressed.subscribe(() => {
+      pressed = true;
+    });
+
+    // Fake the user pressing the escape key by calling the handler directly.
+    dialogContainer.handleEscapeKey();
+
+    expect(pressed).toBe(true);
+  });
+
   it('should close when clicking on the overlay backdrop', () => {
     dialog.open(PizzaMsg, {
       viewContainerRef: testViewContainerRef
@@ -150,6 +196,25 @@ describe('MdDialog', () => {
     expect(overlayContainerElement.querySelector('md-dialog-container')).toBeFalsy();
   });
 
+  it('should notify the user that overlay backdrop was clicked', () => {
+    let dialogRef = dialog.open(PizzaMsg, {
+      viewContainerRef: testViewContainerRef
+    });
+
+    viewContainerFixture.detectChanges();
+
+    let backdrop = overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
+
+    let clicked = false;
+
+    dialogRef.backdropClicked.subscribe(() => {
+      clicked = true;
+    });
+
+    backdrop.click();
+    expect(clicked).toBe(true);
+  });
+
   it('should notify the observers if a dialog has been opened', () => {
     let ref: MdDialogRef<PizzaMsg>;
     dialog.afterOpen.subscribe(r => {
@@ -477,12 +542,18 @@ class ComponentWithChildViewContainer {
 }
 
 /** Simple component for testing ComponentPortal. */
-@Component({template: '<p>Pizza</p> <input> <button>Close</button>'})
+@Component({selector:'pizza-msg', template: '<p>Pizza</p> <input> <button>Close</button>'})
 class PizzaMsg {
   constructor(public dialogRef: MdDialogRef<PizzaMsg>,
               public dialogInjector: Injector) {}
 }
 
+/** Simple component for testing dialog using TemplateRef. */
+@Component({template: '<template #pizzaRef><pizza-msg></pizza-msg></template>'})
+class PizzaMsgContainer {
+  @ViewChild('pizzaRef') pizzaRef: TemplateRef<PizzaMsg>;
+}
+
 @Component({
   template: `
     <h1 md-dialog-title>This is the title</h1>
@@ -510,6 +581,7 @@ class ComponentThatProvidesMdDialog {
 const TEST_DIRECTIVES = [
   ComponentWithChildViewContainer,
   PizzaMsg,
+  PizzaMsgContainer,
   DirectiveWithViewContainer,
   ContentElementDialog
 ];
@@ -518,6 +590,11 @@ const TEST_DIRECTIVES = [
   imports: [MdDialogModule],
   exports: TEST_DIRECTIVES,
   declarations: TEST_DIRECTIVES,
-  entryComponents: [ComponentWithChildViewContainer, PizzaMsg, ContentElementDialog],
+  entryComponents: [
+    ComponentWithChildViewContainer,
+    PizzaMsg,
+    PizzaMsgContainer,
+    ContentElementDialog
+  ],
 })
 class DialogTestModule { }
diff --git a/src/lib/dialog/dialog.ts b/src/lib/dialog/dialog.ts
index 93e48cd6b2fc..e20e4dcc9d06 100644
--- a/src/lib/dialog/dialog.ts
+++ b/src/lib/dialog/dialog.ts
@@ -1,4 +1,4 @@
-import {Injector, ComponentRef, Injectable, Optional, SkipSelf} from '@angular/core';
+import {Injector, ComponentRef, Injectable, Optional, SkipSelf, TemplateRef} from '@angular/core';
 import {Observable} from 'rxjs/Observable';
 import {Subject} from 'rxjs/Subject';
 
@@ -10,12 +10,8 @@ import {MdDialogConfig} from './dialog-config';
 import {MdDialogRef} from './dialog-ref';
 import {MdDialogContainer} from './dialog-container';
 
-
-// TODO(jelbourn): add support for opening with a TemplateRef
 // TODO(jelbourn): animations
 
-
-
 /**
  * Service to open Material Design modal dialogs.
  */
@@ -51,6 +47,34 @@ export class MdDialog {
       private _injector: Injector,
       @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.
+   */
+  openFromTemplateRef<T>(templateRef: TemplateRef<T>, config?: MdDialogConfig): MdDialogRef<T> {
+    config = _applyConfigDefaults(config);
+
+    let overlayRef = this._createOverlay(config);
+
+    let dialogContainer = this._attachDialogContainer(overlayRef, config);
+    let dialogRef = this._attachDialogContent(
+      dialogContainer,
+      overlayRef,
+      undefined,
+      templateRef,
+      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 +86,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 +151,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>,
+      templateRef: TemplateRef<T>,
       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 +174,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 (templateRef) {
+      dialogContainer.attachTemplateRef(templateRef);
+    }
 
     return dialogRef;
   }

From 14ef81c263896f1ad53364a01c00eddd6aa4dbaa Mon Sep 17 00:00:00 2001
From: Ales Rechtorik <ales@f13.cz>
Date: Sun, 29 Jan 2017 11:10:38 +0100
Subject: [PATCH 2/6] fix lint

---
 src/lib/dialog/dialog.spec.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/dialog/dialog.spec.ts b/src/lib/dialog/dialog.spec.ts
index 75a4964c2f12..a57eecef6c56 100644
--- a/src/lib/dialog/dialog.spec.ts
+++ b/src/lib/dialog/dialog.spec.ts
@@ -75,7 +75,7 @@ describe('MdDialog', () => {
   it('should open a dialog with a templateRef', () => {
     const pizzaMsgContainer = TestBed.createComponent(PizzaMsgContainer);
 
-    viewContainerFixture.detectChanges();
+    pizzaMsgContainer.detectChanges();
 
     dialog.openFromTemplateRef(pizzaMsgContainer.componentInstance.pizzaRef);
 
@@ -542,7 +542,7 @@ class ComponentWithChildViewContainer {
 }
 
 /** Simple component for testing ComponentPortal. */
-@Component({selector:'pizza-msg', template: '<p>Pizza</p> <input> <button>Close</button>'})
+@Component({selector: 'pizza-msg', template: '<p>Pizza</p> <input> <button>Close</button>'})
 class PizzaMsg {
   constructor(public dialogRef: MdDialogRef<PizzaMsg>,
               public dialogInjector: Injector) {}

From bd19bd367f16a519f9fa7377a4a3a2a346f1e1fe Mon Sep 17 00:00:00 2001
From: Ales Rechtorik <ales@f13.cz>
Date: Sun, 29 Jan 2017 11:17:13 +0100
Subject: [PATCH 3/6] fix dialog templateRef test

---
 src/lib/dialog/dialog.spec.ts | 27 ++++++++++++++++-----------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/lib/dialog/dialog.spec.ts b/src/lib/dialog/dialog.spec.ts
index a57eecef6c56..5ed0e964e404 100644
--- a/src/lib/dialog/dialog.spec.ts
+++ b/src/lib/dialog/dialog.spec.ts
@@ -73,15 +73,15 @@ describe('MdDialog', () => {
   });
 
   it('should open a dialog with a templateRef', () => {
-    const pizzaMsgContainer = TestBed.createComponent(PizzaMsgContainer);
+    const catDialogContainer = TestBed.createComponent(CatDialogContainer);
 
-    pizzaMsgContainer.detectChanges();
+    catDialogContainer.detectChanges();
 
-    dialog.openFromTemplateRef(pizzaMsgContainer.componentInstance.pizzaRef);
+    dialog.openFromTemplateRef(catDialogContainer.componentInstance.catRef);
 
     viewContainerFixture.detectChanges();
 
-    expect(overlayContainerElement.textContent).toContain('Pizza');
+    expect(overlayContainerElement.textContent).toContain('Cat');
 
     viewContainerFixture.detectChanges();
     let dialogContainerElement = overlayContainerElement.querySelector('md-dialog-container');
@@ -542,16 +542,19 @@ class ComponentWithChildViewContainer {
 }
 
 /** Simple component for testing ComponentPortal. */
-@Component({selector: 'pizza-msg', template: '<p>Pizza</p> <input> <button>Close</button>'})
+@Component({template: '<p>Pizza</p> <input> <button>Close</button>'})
 class PizzaMsg {
   constructor(public dialogRef: MdDialogRef<PizzaMsg>,
               public dialogInjector: Injector) {}
 }
 
-/** Simple component for testing dialog using TemplateRef. */
-@Component({template: '<template #pizzaRef><pizza-msg></pizza-msg></template>'})
-class PizzaMsgContainer {
-  @ViewChild('pizzaRef') pizzaRef: TemplateRef<PizzaMsg>;
+/** Components for testing dialog using TemplateRef. */
+@Component({selector: 'cat-dialog', template: '<p>Cat</p> <input> <button>Close</button>'})
+class CatDialog {}
+
+@Component({template: '<template #catRef><cat-dialog></cat-dialog></template>'})
+class CatDialogContainer {
+  @ViewChild('catRef') catRef: TemplateRef<CatDialog>;
 }
 
 @Component({
@@ -581,7 +584,8 @@ class ComponentThatProvidesMdDialog {
 const TEST_DIRECTIVES = [
   ComponentWithChildViewContainer,
   PizzaMsg,
-  PizzaMsgContainer,
+  CatDialog,
+  CatDialogContainer,
   DirectiveWithViewContainer,
   ContentElementDialog
 ];
@@ -593,7 +597,8 @@ const TEST_DIRECTIVES = [
   entryComponents: [
     ComponentWithChildViewContainer,
     PizzaMsg,
-    PizzaMsgContainer,
+    CatDialog,
+    CatDialogContainer,
     ContentElementDialog
   ],
 })

From dbb1676821091a65198e9a21e5a0875e965027f2 Mon Sep 17 00:00:00 2001
From: Ales Rechtorik <ales@f13.cz>
Date: Sun, 29 Jan 2017 11:25:52 +0100
Subject: [PATCH 4/6] separate component for content elements dialog demo with
 templateRef

---
 src/demo-app/demo-app-module.ts      |  3 +++
 src/demo-app/dialog/dialog-demo.html |  2 +-
 src/demo-app/dialog/dialog-demo.ts   | 26 +++++++++++++++++---------
 3 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/demo-app/demo-app-module.ts b/src/demo-app/demo-app-module.ts
index ffab8cd6399a..8454f65ddd5f 100644
--- a/src/demo-app/demo-app-module.ts
+++ b/src/demo-app/demo-app-module.ts
@@ -12,6 +12,7 @@ import {
   JazzDialog,
   JazzDialogTemplateRef,
   ContentElementDialog,
+  ContentElementTemplateRefDialog,
   DialogDemo,
   IFrameDialog
 } from './dialog/dialog-demo';
@@ -72,6 +73,7 @@ import {InputContainerDemo} from './input/input-container-demo';
     JazzDialog,
     JazzDialogTemplateRef,
     ContentElementDialog,
+    ContentElementTemplateRefDialog,
     IFrameDialog,
     ListDemo,
     LiveAnnouncerDemo,
@@ -109,6 +111,7 @@ import {InputContainerDemo} from './input/input-container-demo';
     JazzDialog,
     JazzDialogTemplateRef,
     ContentElementDialog,
+    ContentElementTemplateRefDialog,
     IFrameDialog,
     RotiniPanel,
     ScienceJoke,
diff --git a/src/demo-app/dialog/dialog-demo.html b/src/demo-app/dialog/dialog-demo.html
index 4e26a2d83ec9..eb08f942f827 100644
--- a/src/demo-app/dialog/dialog-demo.html
+++ b/src/demo-app/dialog/dialog-demo.html
@@ -66,4 +66,4 @@ <h2>Other options</h2>
 
 
 <template #contentElementRef>
-  <demo-content-element-dialog [actionsAlignment]="actionsAlignment"></demo-content-element-dialog>
+  <demo-content-element-template-ref-dialog (close)="closeContentElementUsingTemplateRef()" [actionsAlignment]="actionsAlignment"></demo-content-element-template-ref-dialog>
diff --git a/src/demo-app/dialog/dialog-demo.ts b/src/demo-app/dialog/dialog-demo.ts
index 18a5331b3f4b..d6ed97daefad 100644
--- a/src/demo-app/dialog/dialog-demo.ts
+++ b/src/demo-app/dialog/dialog-demo.ts
@@ -25,6 +25,7 @@ export class DialogDemo {
 
   dialogRef: MdDialogRef<JazzDialog>;
   dialogTemplateRef: MdDialogRef<JazzDialogTemplateRef>;
+  dialogContentTemplateRef: MdDialogRef<ContentElementDialog>;
   lastCloseResult: string;
   actionsAlignment: string;
   config: MdDialogConfig = {
@@ -82,7 +83,16 @@ export class DialogDemo {
   }
 
   openContentElementUsingTemplateRef() {
-    this.dialog.openFromTemplateRef(this.contentElementRef, this.config);
+    this.dialogContentTemplateRef = this.dialog.openFromTemplateRef(
+      this.contentElementRef,
+      this.config
+    );
+  }
+
+  closeContentElementUsingTemplateRef() {
+    if (this.dialogContentTemplateRef) {
+      this.dialogContentTemplateRef.close();
+    }
   }
 }
 
@@ -145,12 +155,10 @@ export class JazzDialogTemplateRef {
     </md-dialog-content>
 
     <md-dialog-actions [attr.align]="actionsAlignment">
-      <!--
       <button
         md-raised-button
         color="primary"
         md-dialog-close>Close</button>
-      -->
       <a
         md-button
         color="primary"
@@ -166,7 +174,6 @@ export class JazzDialogTemplateRef {
   `
 })
 export class ContentElementDialog {
-  @Input()
   actionsAlignment: string;
 
   constructor(public dialog: MdDialog) { }
@@ -178,7 +185,7 @@ export class ContentElementDialog {
 
 
 @Component({
-  selector: 'demo-content-element-dialog',
+  selector: 'demo-content-element-template-ref-dialog',
   styles: [
     `img {
       max-width: 100%;
@@ -202,12 +209,10 @@ export class ContentElementDialog {
     </md-dialog-content>
 
     <md-dialog-actions [attr.align]="actionsAlignment">
-      <!--
       <button
         md-raised-button
         color="primary"
-        md-dialog-close>Close</button>
-      -->
+        (click)="!!close.emit()">Close</button>
       <a
         md-button
         color="primary"
@@ -222,10 +227,13 @@ export class ContentElementDialog {
     </md-dialog-actions>
   `
 })
-export class ContentElementDialog {
+export class ContentElementTemplateRefDialog {
   @Input()
   actionsAlignment: string;
 
+  @Output()
+  close = new EventEmitter<void>();
+
   constructor(public dialog: MdDialog) { }
 
   showInStackedDialog() {

From 1803505ab08320e0c6931db332f52a5539bc680f Mon Sep 17 00:00:00 2001
From: Ales Rechtorik <ales@f13.cz>
Date: Sun, 29 Jan 2017 12:08:20 +0100
Subject: [PATCH 5/6] add missing closing tag

---
 src/demo-app/dialog/dialog-demo.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/demo-app/dialog/dialog-demo.html b/src/demo-app/dialog/dialog-demo.html
index eb08f942f827..ec6cf69cb0e5 100644
--- a/src/demo-app/dialog/dialog-demo.html
+++ b/src/demo-app/dialog/dialog-demo.html
@@ -67,3 +67,4 @@ <h2>Other options</h2>
 
 <template #contentElementRef>
   <demo-content-element-template-ref-dialog (close)="closeContentElementUsingTemplateRef()" [actionsAlignment]="actionsAlignment"></demo-content-element-template-ref-dialog>
+</template>

From 9a0a28be6b551302363577462865fac760ad09a3 Mon Sep 17 00:00:00 2001
From: Ales Rechtorik <ales@f13.cz>
Date: Mon, 30 Jan 2017 21:51:34 +0100
Subject: [PATCH 6/6] address comments

---
 src/demo-app/dialog/dialog-demo.ts | 12 +++----
 src/lib/dialog/dialog-container.ts | 14 ++++----
 src/lib/dialog/dialog-ref.ts       |  6 ++--
 src/lib/dialog/dialog.spec.ts      | 20 +++++------
 src/lib/dialog/dialog.ts           | 55 ++++++++++++++++++++++--------
 5 files changed, 64 insertions(+), 43 deletions(-)

diff --git a/src/demo-app/dialog/dialog-demo.ts b/src/demo-app/dialog/dialog-demo.ts
index d6ed97daefad..623e41b5b28c 100644
--- a/src/demo-app/dialog/dialog-demo.ts
+++ b/src/demo-app/dialog/dialog-demo.ts
@@ -18,14 +18,14 @@ import {MdDialog, MdDialogRef, MdDialogConfig} from '@angular/material';
 })
 export class DialogDemo {
   @ViewChild('jazzDialogRef')
-  jazzDialogRef: TemplateRef<JazzDialogTemplateRef>;
+  jazzDialogRef: TemplateRef<any>;
 
   @ViewChild('contentElementRef')
-  contentElementRef: TemplateRef<ContentElementDialog>;
+  contentElementRef: TemplateRef<any>;
 
   dialogRef: MdDialogRef<JazzDialog>;
-  dialogTemplateRef: MdDialogRef<JazzDialogTemplateRef>;
-  dialogContentTemplateRef: MdDialogRef<ContentElementDialog>;
+  dialogTemplateRef: MdDialogRef<any>;
+  dialogContentTemplateRef: MdDialogRef<any>;
   lastCloseResult: string;
   actionsAlignment: string;
   config: MdDialogConfig = {
@@ -64,7 +64,7 @@ export class DialogDemo {
   }
 
   openJazzUsingTemplateRef() {
-    this.dialogTemplateRef = this.dialog.openFromTemplateRef(this.jazzDialogRef, this.config);
+    this.dialogTemplateRef = this.dialog.openFromTemplate(this.jazzDialogRef, this.config);
 
     this.dialogTemplateRef.afterClosed().first().subscribe(() => {
       this.dialogTemplateRef = null;
@@ -83,7 +83,7 @@ export class DialogDemo {
   }
 
   openContentElementUsingTemplateRef() {
-    this.dialogContentTemplateRef = this.dialog.openFromTemplateRef(
+    this.dialogContentTemplateRef = this.dialog.openFromTemplate(
       this.contentElementRef,
       this.config
     );
diff --git a/src/lib/dialog/dialog-container.ts b/src/lib/dialog/dialog-container.ts
index 7a496e38613e..76d3d72de3a9 100644
--- a/src/lib/dialog/dialog-container.ts
+++ b/src/lib/dialog/dialog-container.ts
@@ -6,7 +6,6 @@ import {
   NgZone,
   OnDestroy,
   ViewContainerRef,
-  TemplateRef,
 } from '@angular/core';
 import {BasePortalHost, ComponentPortal, PortalHostDirective, TemplatePortal} from '../core';
 import {MdDialogConfig} from './dialog-config';
@@ -48,8 +47,13 @@ export class MdDialogContainer extends BasePortalHost implements OnDestroy {
   /** Reference to the open dialog. */
   dialogRef: MdDialogRef<any>;
 
+  /** Exposes ViewContainerRef */
+  containerRef: ViewContainerRef;
+
   constructor(private _viewContainerRef: ViewContainerRef, private _ngZone: NgZone) {
     super();
+
+    this.containerRef = this._viewContainerRef;
   }
 
   /**
@@ -80,12 +84,6 @@ export class MdDialogContainer extends BasePortalHost implements OnDestroy {
     return attachResult;
   }
 
-  attachTemplateRef<T>(templateRef: TemplateRef<T>) {
-    const portal = new TemplatePortal(templateRef, this._viewContainerRef);
-
-    this.attachTemplatePortal(portal);
-  }
-
   /**
    * Handles the user pressing the Escape key.
    * @docs-private
@@ -95,7 +93,7 @@ export class MdDialogContainer extends BasePortalHost implements OnDestroy {
       this.dialogRef.close();
     }
 
-    this.dialogRef.escapePressed.next();
+    this.dialogRef.escapePress.next();
   }
 
   ngOnDestroy() {
diff --git a/src/lib/dialog/dialog-ref.ts b/src/lib/dialog/dialog-ref.ts
index 29cb4f904b64..01409530bf0f 100644
--- a/src/lib/dialog/dialog-ref.ts
+++ b/src/lib/dialog/dialog-ref.ts
@@ -15,16 +15,16 @@ export class MdDialogRef<T> {
   componentInstance: T;
 
   /** Expose overlay backdrop click event */
-  backdropClicked: Observable<void>;
+  backdropClick: Observable<void>;
 
   /** Subject for notifying the user that esc key way pressed */
-  escapePressed = new Subject<void>();
+  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) {
-    this.backdropClicked = this._overlayRef.backdropClick();
+    this.backdropClick = this._overlayRef.backdropClick();
   }
 
   /**
diff --git a/src/lib/dialog/dialog.spec.ts b/src/lib/dialog/dialog.spec.ts
index 5ed0e964e404..3d09ba007dda 100644
--- a/src/lib/dialog/dialog.spec.ts
+++ b/src/lib/dialog/dialog.spec.ts
@@ -77,7 +77,7 @@ describe('MdDialog', () => {
 
     catDialogContainer.detectChanges();
 
-    dialog.openFromTemplateRef(catDialogContainer.componentInstance.catRef);
+    dialog.openFromTemplate(catDialogContainer.componentInstance.catRef);
 
     viewContainerFixture.detectChanges();
 
@@ -171,16 +171,14 @@ describe('MdDialog', () => {
     let dialogContainer: MdDialogContainer =
         viewContainerFixture.debugElement.query(By.directive(MdDialogContainer)).componentInstance;
 
-    let pressed = false;
+    let pressedSpy = jasmine.createSpy('clicked callback');
 
-    dialogRef.escapePressed.subscribe(() => {
-      pressed = true;
-    });
+    dialogRef.escapePress.subscribe(pressedSpy);
 
     // Fake the user pressing the escape key by calling the handler directly.
     dialogContainer.handleEscapeKey();
 
-    expect(pressed).toBe(true);
+    expect(pressedSpy).toHaveBeenCalled();
   });
 
   it('should close when clicking on the overlay backdrop', () => {
@@ -205,14 +203,14 @@ describe('MdDialog', () => {
 
     let backdrop = overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
 
-    let clicked = false;
+    let clickedSpy = jasmine.createSpy('clicked callback');
 
-    dialogRef.backdropClicked.subscribe(() => {
-      clicked = true;
-    });
+    dialogRef.backdropClick.subscribe(clickedSpy);
 
     backdrop.click();
-    expect(clicked).toBe(true);
+
+    expect(clickedSpy).toHaveBeenCalled();
+
   });
 
   it('should notify the observers if a dialog has been opened', () => {
diff --git a/src/lib/dialog/dialog.ts b/src/lib/dialog/dialog.ts
index e20e4dcc9d06..63494599d2c6 100644
--- a/src/lib/dialog/dialog.ts
+++ b/src/lib/dialog/dialog.ts
@@ -2,7 +2,14 @@ import {Injector, ComponentRef, Injectable, Optional, SkipSelf, TemplateRef} fro
 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';
@@ -53,7 +60,7 @@ export class MdDialog {
    * @param config Extra configuration options.
    * @returns Reference to the newly-opened dialog.
    */
-  openFromTemplateRef<T>(templateRef: TemplateRef<T>, config?: MdDialogConfig): MdDialogRef<T> {
+  openFromTemplate(templateRef: TemplateRef<any>, config?: MdDialogConfig): MdDialogRef<void> {
     config = _applyConfigDefaults(config);
 
     let overlayRef = this._createOverlay(config);
@@ -62,7 +69,7 @@ export class MdDialog {
     let dialogRef = this._attachDialogContent(
       dialogContainer,
       overlayRef,
-      undefined,
+      null,
       templateRef,
       config
     );
@@ -90,7 +97,7 @@ export class MdDialog {
       dialogContainer,
       overlayRef,
       component,
-      undefined,
+      null,
       config
     );
 
@@ -168,26 +175,44 @@ export class MdDialog {
     // Set the dialogRef to the container so that it can use the ref to close the dialog.
     dialogContainer.dialogRef = dialogRef;
 
-    // We create an injector specifically for the component we're instantiating so that it can
-    // 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, userInjector || this._injector);
-
     if (component) {
-      let contentPortal = new ComponentPortal(component, null, dialogInjector);
-
-      let contentRef = dialogContainer.attachComponentPortal(contentPortal);
-      dialogRef.componentInstance = contentRef.instance;
+      this._attachComponentToContainer<T>(
+        component,
+        dialogContainer,
+        dialogRef,
+        config
+      );
     }
 
     if (templateRef) {
-      dialogContainer.attachTemplateRef(templateRef);
+      this._attachTemplateToContainer(templateRef, dialogContainer);
     }
 
     return dialogRef;
   }
 
+  private _attachComponentToContainer<T>(
+    component: ComponentType<T>,
+    container: MdDialogContainer,
+    dialogRef: MdDialogRef<T>,
+    config: MdDialogConfig) {
+      // We create an injector specifically for the component we're instantiating so that it can
+    // 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, userInjector || this._injector);
+
+    const portal = new ComponentPortal(component, null, dialogInjector);
+
+    const contentRef = container.attachComponentPortal(portal);
+    dialogRef.componentInstance = contentRef.instance;
+  }
+
+  private _attachTemplateToContainer(templateRef: TemplateRef<any>, container: MdDialogContainer) {
+    const portal = new TemplatePortal(templateRef, container.containerRef);
+    container.attachTemplatePortal(portal);
+  }
+
   /**
    * Creates an overlay state from a dialog config.
    * @param dialogConfig The dialog configuration.