diff --git a/src/demo-app/connected-overlay/connected-overlay-demo.html b/src/demo-app/connected-overlay/connected-overlay-demo.html
index 2d0085644614..77dd7445d092 100644
--- a/src/demo-app/connected-overlay/connected-overlay-demo.html
+++ b/src/demo-app/connected-overlay/connected-overlay-demo.html
@@ -102,3 +102,11 @@ <h2>Options</h2>
 </div>
 
 <div style="height: 500px"></div>
+
+<ng-template #overlay>
+  <div class="demo-overlay">
+    <div style="overflow: auto;">
+      <ul><li *ngFor="let item of itemArray; index as i">{{itemText}} {{i}}</li></ul>
+    </div>
+  </div>
+</ng-template>
diff --git a/src/demo-app/connected-overlay/connected-overlay-demo.scss b/src/demo-app/connected-overlay/connected-overlay-demo.scss
index b11cada40e0f..0f46359f1cfe 100644
--- a/src/demo-app/connected-overlay/connected-overlay-demo.scss
+++ b/src/demo-app/connected-overlay/connected-overlay-demo.scss
@@ -12,7 +12,7 @@
   }
 }
 
-demo-overlay {
+.demo-overlay {
   display: block;
 
   background: lightblue;
@@ -29,12 +29,3 @@ demo-overlay {
   align-items: center;
   padding: 10px;
 }
-
-.cdk-overlay-connected-position-bounding-box.demo-show-box {
-  background: orangered;
-  opacity: 0.2;
-
-  .cdk-overlay-pane {
-    opacity: 1;
-  }
-}
diff --git a/src/demo-app/connected-overlay/connected-overlay-demo.ts b/src/demo-app/connected-overlay/connected-overlay-demo.ts
index d3019cd46e80..a5bfb9c67993 100644
--- a/src/demo-app/connected-overlay/connected-overlay-demo.ts
+++ b/src/demo-app/connected-overlay/connected-overlay-demo.ts
@@ -14,8 +14,8 @@ import {
   OverlayRef,
   VerticalConnectionPos
 } from '@angular/cdk/overlay';
-import {ComponentPortal} from '@angular/cdk/portal';
-import {Component, ViewChild, ViewContainerRef} from '@angular/core';
+import {TemplatePortal} from '@angular/cdk/portal';
+import {Component, TemplateRef, ViewChild, ViewContainerRef} from '@angular/core';
 
 
 @Component({
@@ -26,6 +26,7 @@ import {Component, ViewChild, ViewContainerRef} from '@angular/core';
 })
 export class ConnectedOverlayDemo {
   @ViewChild(CdkOverlayOrigin) _overlayOrigin: CdkOverlayOrigin;
+  @ViewChild('overlay') overlayTemplate: TemplateRef<any>;
 
   originX: HorizontalConnectionPos = 'start';
   originY: VerticalConnectionPos = 'bottom';
@@ -37,6 +38,7 @@ export class ConnectedOverlayDemo {
   offsetX = 0;
   offsetY = 0;
   itemCount = 25;
+  itemArray: any[] = [];
   itemText = 'Item with a long name';
   overlayRef: OverlayRef | null;
 
@@ -82,11 +84,8 @@ export class ConnectedOverlayDemo {
       minHeight: 50
     });
 
-    const portal = new ComponentPortal(DemoOverlay, this.viewContainerRef);
-    const componentRef = this.overlayRef.attach(portal);
-
-    componentRef.instance.items = Array(this.itemCount);
-    componentRef.instance.text = this.itemText;
+    this.itemArray = Array(this.itemCount);
+    this.overlayRef.attach(new TemplatePortal(this.overlayTemplate, this.viewContainerRef));
   }
 
   close() {
@@ -98,26 +97,11 @@ export class ConnectedOverlayDemo {
   }
 
   toggleShowBoundingBox() {
-    const box = document.querySelector('.cdk-overlay-connected-position-bounding-box');
+    const box = document.querySelector<HTMLElement>('.cdk-overlay-connected-position-bounding-box');
 
     if (box) {
       this.showBoundingBox = !this.showBoundingBox;
-      box.classList.toggle('demo-show-box');
+      box.style.background = this.showBoundingBox ? 'rgb(255, 69, 0, 0.2)' : '';
     }
   }
 }
-
-
-@Component({
-  selector: 'demo-overlay',
-  template: `
-    <div style="overflow: auto;">
-      <ul><li *ngFor="let item of items; index as i">{{text}} {{i}}</li></ul>
-    </div>`,
-
-})
-export class DemoOverlay {
-  items: number[];
-  text: string;
-}
-
diff --git a/src/demo-app/demo-app/demo-module.ts b/src/demo-app/demo-app/demo-module.ts
index ca90e26d7a25..6ad672132e7a 100644
--- a/src/demo-app/demo-app/demo-module.ts
+++ b/src/demo-app/demo-app/demo-module.ts
@@ -24,7 +24,7 @@ import {ButtonDemo} from '../button/button-demo';
 import {CardDemo} from '../card/card-demo';
 import {CheckboxDemo, MatCheckboxDemoNestedChecklist} from '../checkbox/checkbox-demo';
 import {ChipsDemo} from '../chips/chips-demo';
-import {ConnectedOverlayDemo, DemoOverlay} from '../connected-overlay/connected-overlay-demo';
+import {ConnectedOverlayDemo} from '../connected-overlay/connected-overlay-demo';
 import {CustomHeader, DatepickerDemo} from '../datepicker/datepicker-demo';
 import {DemoMaterialModule} from '../demo-material-module';
 import {ContentElementDialog, DialogDemo, IFrameDialog, JazzDialog} from '../dialog/dialog-demo';
@@ -95,7 +95,6 @@ import {MaterialExampleModule} from '../example/example-module';
     CustomHeader,
     DatepickerDemo,
     DemoApp,
-    DemoOverlay,
     DialogDemo,
     DrawerDemo,
     ExampleBottomSheet,
@@ -143,7 +142,6 @@ import {MaterialExampleModule} from '../example/example-module';
     ContentElementDialog,
     CustomHeader,
     DemoApp,
-    DemoOverlay,
     ExampleBottomSheet,
     IFrameDialog,
     JazzDialog,