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

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

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