diff --git a/src/dev-app/dev-app-module.ts b/src/dev-app/dev-app-module.ts
index 38cc5dfaab5b..170bced134e2 100644
--- a/src/dev-app/dev-app-module.ts
+++ b/src/dev-app/dev-app-module.ts
@@ -10,10 +10,9 @@ import {LayoutModule} from '@angular/cdk/layout';
 import {FullscreenOverlayContainer, OverlayContainer} from '@angular/cdk/overlay';
 import {CommonModule} from '@angular/common';
 import {HttpClientModule} from '@angular/common/http';
-import {Injector, NgModule} from '@angular/core';
-import {createCustomElement} from '@angular/elements';
+import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {EXAMPLE_COMPONENTS, ExampleModule} from '@angular/material-examples';
+import {ExampleModule} from '@angular/material-examples';
 import {BrowserModule} from '@angular/platform-browser';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {RouterModule} from '@angular/router';
@@ -152,13 +151,4 @@ import {VirtualScrollDemo} from './virtual-scroll/virtual-scroll-demo';
   ],
   bootstrap: [DevAppComponent],
 })
-export class DevAppModule {
-
-  constructor(injector: Injector) {
-    // Register examples as custom elements so that they can be inserted into the DOM dynamically
-    Object.keys(EXAMPLE_COMPONENTS).forEach(key => {
-      const element = createCustomElement(EXAMPLE_COMPONENTS[key].component, {injector});
-      customElements.define(key, element);
-    });
-  }
-}
+export class DevAppModule {}
diff --git a/src/dev-app/example/example-list.ts b/src/dev-app/example/example-list.ts
index d71ec6502164..b70a77827fda 100644
--- a/src/dev-app/example/example-list.ts
+++ b/src/dev-app/example/example-list.ts
@@ -6,9 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, Input} from '@angular/core';
+import {Component, Input, SimpleChanges, OnChanges, Injector} 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({
@@ -51,7 +52,10 @@ import {coerceBooleanProperty} from '@angular/cdk/coercion';
     }
   `]
 })
-export class ExampleList {
+export class ExampleList implements OnChanges {
+  /** Keeps track of the example ids that have been compiled already. */
+  private static _compiledComponents = new Set<string>();
+
   /** Type of examples being displayed. */
   @Input() type: string;
 
@@ -64,4 +68,20 @@ export class ExampleList {
   _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);
+        });
+    }
+  }
 }