feat: TemplateRef can access the dialog so it can control the modal a…

…nd access the context
shlomiassaf · Aug 30, 2016 · 5e6c59e · 5e6c59e
1 parent a031924
commit 5e6c59e
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 5 deletions.
diff --git a/src/components/angular2-modal/providers/modal.ts b/src/components/angular2-modal/providers/modal.ts
@@ -92,7 +92,7 @@ export abstract class Modal {
     if (typeof content === 'string') {
       nodes = [[this.renderer.createText(null, `${content}`)]];
     } else if (content instanceof TemplateRef) {
-      nodes = [this.overlay.defaultViewContainer.createEmbeddedView(content, dialogRef.context).rootNodes];
+      nodes = [this.overlay.defaultViewContainer.createEmbeddedView(content, { dialogRef }).rootNodes];
     } else {
       nodes = [dialogRef.overlayRef.instance.addEmbeddedComponent({ component: content, bindings: b }).rootNodes];
     }

diff --git a/src/demo/app/bootstrap-demo/bootstrap-demo-page/bootstrap-demo-page.tpl.html b/src/demo/app/bootstrap-demo/bootstrap-demo-page/bootstrap-demo-page.tpl.html
@@ -10,14 +10,17 @@
         </div>
     </div>
 </demo-head>
-<template #templateRef>
+<template #templateRef let-dialogRef="dialogRef" let-ctx="dialogRef.context">
     <div style="padding: 10px">
         <div class="page-header">
             <h1>TemplateRef Example</h1>
         </div>
         <div class="jumbotron">
             <h1>Hello, modal!</h1>
-            <p> I'm a declarative TemplateRef!</p>
+            <p>I'm a declarative TemplateRef!</p>
+            <p>TemplateRef can also access the DialogRef for context and modal control:</p>
+            <pre>{{ ctx | json }}</pre>
+            <button class="btn btn-primary" (click)="dialogRef.close(true)">Close Me</button>
         </div>
     </div>
 </template>
diff --git a/src/demo/app/bootstrap-demo/bootstrap-demo-page/bootstrap-demo-page.ts b/src/demo/app/bootstrap-demo/bootstrap-demo-page/bootstrap-demo-page.ts
@@ -46,7 +46,7 @@ export class BootstrapDemoPage {
       {
         text: 'TemplateRef content',
         factory: () => this.modal
-          .open(this.templateRef, new BSModalContextBuilder().isBlocking(false).toOverlayConfig())
+          .open(this.templateRef, new BSModalContextBuilder({ abd: 123 } as any).isBlocking(false).toOverlayConfig())
       },
       {
         text: 'Custom Modal content',

diff --git a/src/demo/app/vex-demo/vex-demo.tpl.html b/src/demo/app/vex-demo/vex-demo.tpl.html
@@ -23,14 +23,17 @@
         <br><br>
     </div>
 </demo-head>
-<template #templateRef>
+<template #templateRef let-dialogRef="dialogRef" let-ctx="dialogRef.context">
     <div style="padding: 10px">
         <div class="page-header">
             <h1>TemplateRef Example</h1>
         </div>
         <div class="jumbotron">
             <h1>Hello, modal!</h1>
             <p> I'm a declarative TemplateRef!</p>
+            <p>TemplateRef can also access the DialogRef for context and modal control:</p>
+            <pre>{{ ctx | json }}</pre>
+            <button class="btn btn-primary" (click)="dialogRef.close(true)">Close Me</button>
         </div>
     </div>
 </template>