chore: fix connected overlay demo (#11325)

With 8735aa5 all demos had their style encapsulation enabled, however this ended up breaking the connected overlay demo because it has some styles that are targeting an overlay. These changes fix the styling and simplify the overlay setup.

Author: crisbeto

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>

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;
-  }
-}

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;
-}
-

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,