chore(demo): add examples to demo app

Author: andrewseguin

.github/CODEOWNERS

@@ -109,6 +109,8 @@
 /src/demo-app/demo-app/**                          @jelbourn
 /src/demo-app/dialog/**                            @jelbourn @crisbeto
 /src/demo-app/drawer/**                            @mmalerba
+/src/demo-app/example/**                           @andrewseguin
+/src/demo-app/examples-page/**                     @andrewseguin
 /src/demo-app/expansion/**                         @josephperrott
 /src/demo-app/focus-origin/**                      @mmalerba
 /src/demo-app/gestures/**                          @jelbourn

package-lock.json

@@ -31,6 +31,7 @@
     "@angular/compiler": "6.0.0-rc.1",
     "@angular/core": "6.0.0-rc.1",
     "@angular/forms": "6.0.0-rc.1",
+    "@angular/elements": "6.0.0-rc.1",
     "@angular/platform-browser": "6.0.0-rc.1",
     "core-js": "^2.4.1",
     "rxjs": "6.0.0-rc.0",
@@ -68,6 +69,7 @@
     "chalk": "^1.1.3",
     "dgeni": "^0.4.9",
     "dgeni-packages": "^0.24.3",
+    "document-register-element": "^1.8.1",
     "firebase": "^4.0.0",
     "firebase-admin": "^5.0.0",
     "firebase-tools": "^3.11.0",

package.json

@@ -48,6 +48,7 @@ export class Home {}
 export class DemoApp {
   dark = false;
   navItems = [
+    {name: 'Examples', route: '/examples'},
     {name: 'Autocomplete', route: '/autocomplete'},
     {name: 'Badge', route: '/badge'},
     {name: 'Bottom sheet', route: '/bottom-sheet'},

src/demo-app/demo-app/demo-app.ts

@@ -8,9 +8,12 @@
 
 import {FullscreenOverlayContainer, OverlayContainer} from '@angular/cdk/overlay';
 import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
+import {Injector, NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
+import {createCustomElement} from '@angular/elements';
+import {EXAMPLE_COMPONENTS, ExampleModule} from '@angular/material-examples';
+
 import {AutocompleteDemo} from '../autocomplete/autocomplete-demo';
 import {BottomSheetDemo, ExampleBottomSheet} from '../bottom-sheet/bottom-sheet-demo';
 import {BaselineDemo} from '../baseline/baseline-demo';
@@ -53,7 +56,11 @@ import {StepperDemo} from '../stepper/stepper-demo';
 import {ScreenTypeDemo} from '../screen-type/screen-type-demo';
 import {LayoutModule} from '@angular/cdk/layout';
 import {
-  FoggyTabContent, RainyTabContent, SunnyTabContent, TabsDemo, Counter
+  Counter,
+  FoggyTabContent,
+  RainyTabContent,
+  SunnyTabContent,
+  TabsDemo
 } from '../tabs/tabs-demo';
 import {ToolbarDemo} from '../toolbar/toolbar-demo';
 import {TooltipDemo} from '../tooltip/tooltip-demo';
@@ -64,9 +71,13 @@ import {TableDemoModule} from '../table/table-demo-module';
 import {BadgeDemo} from '../badge/badge-demo';
 import {TreeDemoModule} from '../tree/tree-demo-module';
 import {ConnectedOverlayDemo, DemoOverlay} from '../connected-overlay/connected-overlay-demo';
+import {ExamplesPage} from '../examples-page/examples-page';
+import {MaterialExampleModule} from '../example/example-module';
 
 @NgModule({
   imports: [
+    MaterialExampleModule,
+    ExampleModule,
     CommonModule,
     FormsModule,
     ReactiveFormsModule,
@@ -77,6 +88,7 @@ import {ConnectedOverlayDemo, DemoOverlay} from '../connected-overlay/connected-
     TreeDemoModule,
   ],
   declarations: [
+    ExamplesPage,
     AutocompleteDemo,
     BottomSheetDemo,
     BaselineDemo,
@@ -153,4 +165,12 @@ import {ConnectedOverlayDemo, DemoOverlay} from '../connected-overlay/connected-
     DemoOverlay,
   ],
 })
-export class DemoModule {}
+export class DemoModule {
+  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);
+    });
+  }
+}

src/demo-app/demo-app/demo-module.ts

@@ -54,6 +54,7 @@ import {TableDemoPage} from '../table/table-demo-page';
 import {TABLE_DEMO_ROUTES} from '../table/routes';
 import {BadgeDemo} from '../badge/badge-demo';
 import {ConnectedOverlayDemo} from '../connected-overlay/connected-overlay-demo';
+import {ExamplesPage} from '../examples-page/examples-page';
 
 export const DEMO_APP_ROUTES: Routes = [
   {path: '', component: DemoApp, children: [
@@ -102,6 +103,7 @@ export const DEMO_APP_ROUTES: Routes = [
     {path: 'stepper', component: StepperDemo},
     {path: 'screen-type', component: ScreenTypeDemo},
     {path: 'connected-overlay', component: ConnectedOverlayDemo},
+    {path: 'examples', component: ExamplesPage}
   ]}
 ];
 

src/demo-app/demo-app/routes.ts

@@ -0,0 +1,42 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Component, Input} from '@angular/core';
+import {EXAMPLE_COMPONENTS} from '@angular/material-examples';
+
+/** Displays a set of material examples in a mat-accordion. */
+@Component({
+  selector: 'material-example-list',
+  template: `
+    <h2> {{type}} Examples </h2>
+    <mat-accordion>
+      <mat-expansion-panel *ngFor="let id of ids">
+        <mat-expansion-panel-header>
+          {{id}}: {{exampleComponents[id].title}}
+        </mat-expansion-panel-header>
+        <ng-template matExpansionPanelContent>
+          <material-example [id]="id"></material-example>
+        </ng-template>
+      </mat-expansion-panel>
+    </mat-accordion>
+  `,
+  styles: [`
+    h2 {
+      text-transform: capitalize;
+    }
+  `]
+})
+export class ExampleList {
+  /** Type of examples being displayed. */
+  @Input() type: string;
+
+  /** IDs of the examples to display. */
+  @Input() ids: string[];
+
+  exampleComponents = EXAMPLE_COMPONENTS;
+}

src/demo-app/example/example-list.ts

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {CommonModule} from '@angular/common';
+import {MatExpansionModule} from '@angular/material';
+import {NgModule} from '@angular/core';
+
+import {ExampleList} from './example-list';
+import {Example} from './example';
+
+@NgModule({
+  imports: [MatExpansionModule, CommonModule],
+  declarations: [Example, ExampleList],
+  exports: [Example, ExampleList]
+})
+export class MaterialExampleModule {}

src/demo-app/example/example-module.ts

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Component, ElementRef, Input} from '@angular/core';
+
+@Component({
+  selector: 'material-example',
+  template: '',
+})
+export class Example {
+  /** ID of the material example to display. */
+  @Input() id: string;
+
+  constructor(private elementRef: ElementRef) { }
+
+  ngOnInit() {
+    const element = document.createElement(this.id);
+    this.elementRef.nativeElement.appendChild(element);
+  }
+}

src/demo-app/example/example.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Component} from '@angular/core';
+import {EXAMPLE_COMPONENTS} from '@angular/material-examples';
+
+/** Renders all material examples listed in the generated EXAMPLE_COMPONENTS. */
+@Component({
+  template: `<material-example-list [ids]="examples"></material-example-list>`
+})
+export class ExamplesPage {
+  examples = Object.keys(EXAMPLE_COMPONENTS);
+}