chore: fix connected position demo (#10460)

Author: crisbeto

src/demo-app/connected-overlay/connected-overlay-demo.html

@@ -1,8 +1,8 @@
 <div style="height: 500px"></div>
 
-<div class="demo-options">
+<div class="demo-options mat-typography">
   <div>
-    <h4>Origin X</h4>
+    <h2>Origin X</h2>
     <mat-radio-group [(ngModel)]="originX">
       <mat-radio-button value="start">start</mat-radio-button>
       <mat-radio-button value="center">center</mat-radio-button>
@@ -11,7 +11,7 @@ <h4>Origin X</h4>
   </div>
 
   <div>
-    <h4>Origin Y</h4>
+    <h2>Origin Y</h2>
     <mat-radio-group [(ngModel)]="originY">
       <mat-radio-button value="top">top</mat-radio-button>
       <mat-radio-button value="center">center</mat-radio-button>
@@ -20,7 +20,7 @@ <h4>Origin Y</h4>
   </div>
 
   <div>
-    <h4>Overlay X</h4>
+    <h2>Overlay X</h2>
     <mat-radio-group [(ngModel)]="overlayX">
       <mat-radio-button value="start">start</mat-radio-button>
       <mat-radio-button value="center">center</mat-radio-button>
@@ -29,7 +29,7 @@ <h4>Overlay X</h4>
   </div>
 
   <div>
-    <h4>Overlay Y</h4>
+    <h2>Overlay Y</h2>
     <mat-radio-group [(ngModel)]="overlayY">
       <mat-radio-button value="top">top</mat-radio-button>
       <mat-radio-button value="center">center</mat-radio-button>
@@ -38,28 +38,39 @@ <h4>Overlay Y</h4>
   </div>
 
   <div>
-    <h4>Offsets</h4>
+    <h2>Offsets</h2>
 
-    <div>
+    <p>
       <label>
         offsetX
         <input type="number" [(ngModel)]="offsetX">
       </label>
-    </div>
+    </p>
 
-    <div>
+    <p>
       <label>
         offsetY
         <input type="number" [(ngModel)]="offsetY">
       </label>
-    </div>
+    </p>
   </div>
 
   <div>
-    <label>
-      Number of items in the overlay
-      <input #count type="number" value="25" (input)="updateCount(count.value)">
-    </label>
+    <h2>Options</h2>
+
+    <p>
+      <label>
+        Number of items in the overlay
+        <input type="number" [(ngModel)]="itemCount">
+      </label>
+    </p>
+
+    <p>
+      <label>
+        Item text
+        <input [(ngModel)]="itemText">
+      </label>
+    </p>
 
     <div>
       <mat-checkbox [(ngModel)]="isFlexible">Allow flexible dimensions</mat-checkbox>
@@ -84,7 +95,6 @@ <h4>Offsets</h4>
 
 
 <div class="demo-trigger">
-  <div style="width: 50px;"></div>
   <button mat-raised-button
       cdkOverlayOrigin
       type="button"

src/demo-app/connected-overlay/connected-overlay-demo.scss

@@ -5,6 +5,11 @@
   & > div {
     margin: 16px;
   }
+
+  .mat-radio-button {
+    display: block;
+    margin-bottom: 5px;
+  }
 }
 
 demo-overlay {

src/demo-app/connected-overlay/connected-overlay-demo.ts

@@ -18,8 +18,6 @@ import {
 } from '@angular/cdk/overlay';
 
 
-let itemCount = 25;
-
 @Component({
   moduleId: module.id,
   selector: 'overlay-demo',
@@ -39,6 +37,8 @@ export class ConnectedOverlayDemo {
   showBoundingBox = false;
   offsetX = 0;
   offsetY = 0;
+  itemCount = 25;
+  itemText = 'Item with a long name';
   overlayRef: OverlayRef | null;
 
   constructor(
@@ -84,7 +84,11 @@ export class ConnectedOverlayDemo {
       minHeight: 50
     });
 
-    this.overlayRef.attach(new ComponentPortal(DemoOverlay, this.viewContainerRef));
+    const portal = new ComponentPortal(DemoOverlay, this.viewContainerRef);
+    const componentRef = this.overlayRef.attach(portal);
+
+    componentRef.instance.items = Array(this.itemCount);
+    componentRef.instance.text = this.itemText;
   }
 
   close() {
@@ -95,10 +99,6 @@ export class ConnectedOverlayDemo {
     }
   }
 
-  updateCount(value: number) {
-    itemCount = +value;
-  }
-
   toggleShowBoundingBox() {
     const box = document.querySelector('.cdk-overlay-connected-position-bounding-box');
 
@@ -111,14 +111,15 @@ export class ConnectedOverlayDemo {
 
 
 @Component({
+  selector: 'demo-overlay',
   template: `
     <div style="overflow: auto;">
-      {{items.length}}
-      <ul><li *ngFor="let item of items; index as i">Item with a long name {{i}}</li></ul>
+      <ul><li *ngFor="let item of items; index as i">{{text}} {{i}}</li></ul>
     </div>`,
   encapsulation: ViewEncapsulation.None,
 })
 export class DemoOverlay {
-  items = Array(itemCount);
+  items: number[];
+  text: string;
 }