From 043eae18c4d68335fc8f67e5f43d7aee1ae7b1ee Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Thu, 3 Jan 2019 01:48:24 +0200
Subject: [PATCH] build: unable to render individual examples in demo app
 (#14643)

Seems like something that was broken by #14522 by accident. Since the custom component is compiled inside the example list, we can't use individual examples anymore which breaks the ripple demo. These changes move the compilation into the `example` and simplify the setup a little bit.
---
 src/dev-app/example/example-list.ts | 25 +++----------------------
 src/dev-app/example/example.ts      | 17 ++++++++++++-----
 2 files changed, 15 insertions(+), 27 deletions(-)

diff --git a/src/dev-app/example/example-list.ts b/src/dev-app/example/example-list.ts
index b70a77827fd..5731764c188 100644
--- a/src/dev-app/example/example-list.ts
+++ b/src/dev-app/example/example-list.ts
@@ -6,10 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, Input, SimpleChanges, OnChanges, Injector} from '@angular/core';
+import {Component, Input} from '@angular/core';
 import {EXAMPLE_COMPONENTS} from '@angular/material-examples';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
-import {createCustomElement} from '@angular/elements';
 
 /** Displays a set of material examples in a mat-accordion. */
 @Component({
@@ -33,6 +32,7 @@ import {createCustomElement} from '@angular/elements';
   styles: [`
     mat-expansion-panel {
       box-shadow: none !important;
+      border-radius: 0 !important;
       background: transparent;
       border-top: 1px solid #CCC;
     }
@@ -52,10 +52,7 @@ import {createCustomElement} from '@angular/elements';
     }
   `]
 })
-export class ExampleList implements OnChanges {
-  /** Keeps track of the example ids that have been compiled already. */
-  private static _compiledComponents = new Set<string>();
-
+export class ExampleList {
   /** Type of examples being displayed. */
   @Input() type: string;
 
@@ -68,20 +65,4 @@ export class ExampleList implements OnChanges {
   _expandAll: boolean;
 
   exampleComponents = EXAMPLE_COMPONENTS;
-
-  constructor(private _injector: Injector) {}
-
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes.ids) {
-      (changes.ids.currentValue as string[])
-        .filter(id => !ExampleList._compiledComponents.has(id))
-        .forEach(id => {
-          const element = createCustomElement(EXAMPLE_COMPONENTS[id].component, {
-            injector: this._injector
-          });
-          customElements.define(id, element);
-          ExampleList._compiledComponents.add(id);
-        });
-    }
-  }
 }
diff --git a/src/dev-app/example/example.ts b/src/dev-app/example/example.ts
index a28ec4ea820..215d71bf715 100644
--- a/src/dev-app/example/example.ts
+++ b/src/dev-app/example/example.ts
@@ -9,6 +9,7 @@
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {Component, ElementRef, Injector, Input, OnInit} from '@angular/core';
 import {EXAMPLE_COMPONENTS} from '@angular/material-examples';
+import {createCustomElement} from '@angular/elements';
 
 @Component({
   selector: 'material-example',
@@ -54,14 +55,20 @@ export class Example implements OnInit {
 
   title: string;
 
-  constructor(private elementRef: ElementRef, private injector: Injector) { }
+  constructor(private _elementRef: ElementRef<HTMLElement>, private _injector: Injector) { }
 
   ngOnInit() {
-    // Should be created with this component's injector to capture the whole injector which may
-    // include provided things like Directionality.
-    const exampleElementCtor = customElements.get(this.id);
-    this.elementRef.nativeElement.appendChild(new exampleElementCtor(this.injector));
+    let exampleElementCtor = customElements.get(this.id);
 
+    if (!exampleElementCtor) {
+      exampleElementCtor = createCustomElement(EXAMPLE_COMPONENTS[this.id].component, {
+        injector: this._injector
+      });
+
+      customElements.define(this.id, exampleElementCtor);
+    }
+
+    this._elementRef.nativeElement.appendChild(new exampleElementCtor(this._injector));
     this.title = EXAMPLE_COMPONENTS[this.id] ? EXAMPLE_COMPONENTS[this.id].title : '';
   }
 }