chore(demo): add examples to demo app (#11018)

* chore(demo): add examples to demo app

* fix aot

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.json

@@ -30,8 +30,10 @@
     "@angular/common": "6.0.0-rc.6",
     "@angular/compiler": "6.0.0-rc.6",
     "@angular/core": "6.0.0-rc.6",
+    "@angular/elements": "6.0.0-rc.6",
     "@angular/forms": "6.0.0-rc.6",
     "@angular/platform-browser": "6.0.0-rc.6",
+    "@webcomponents/custom-elements": "^1.1.0",
     "core-js": "^2.4.1",
     "rxjs": "6.0.0",
     "systemjs": "0.19.43",

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

@@ -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-module.ts

@@ -9,9 +9,12 @@
 import {LayoutModule} from '@angular/cdk/layout';
 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 {BadgeDemo} from '../badge/badge-demo';
 import {BaselineDemo} from '../baseline/baseline-demo';
@@ -65,9 +68,13 @@ import {TypographyDemo} from '../typography/typography-demo';
 import {DemoApp, Home} from './demo-app';
 import {DEMO_APP_ROUTES} from './routes';
 import {PaginatorDemo} from '../paginator/paginator-demo';
+import {ExamplesPage} from '../examples-page/examples-page';
+import {MaterialExampleModule} from '../example/example-module';
 
 @NgModule({
   imports: [
+    MaterialExampleModule,
+    ExampleModule,
     CommonModule,
     FormsModule,
     ReactiveFormsModule,
@@ -78,6 +85,7 @@ import {PaginatorDemo} from '../paginator/paginator-demo';
     TreeDemoModule,
   ],
   declarations: [
+    ExamplesPage,
     AutocompleteDemo,
     BadgeDemo,
     BaselineDemo,
@@ -155,4 +163,12 @@ import {PaginatorDemo} from '../paginator/paginator-demo';
     SpaghettiPanel,
   ],
 })
-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/routes.ts

@@ -56,6 +56,7 @@ import {BadgeDemo} from '../badge/badge-demo';
 import {ConnectedOverlayDemo} from '../connected-overlay/connected-overlay-demo';
 import {PaginatorDemo} from '../paginator/paginator-demo';
 
+import {ExamplesPage} from '../examples-page/examples-page';
 
 export const DEMO_APP_ROUTES: Routes = [
   {path: '', component: DemoApp, children: [
@@ -105,6 +106,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/example/example-list.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-module.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.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/examples-page/examples-page.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);
+}

src/demo-app/index.html

@@ -11,6 +11,13 @@
   <link href="theme.css" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
 
+  <script>
+    if (customElements) {
+      customElements.forcePolyfill = true;
+    }
+  </script>
+  <script src="node_modules/@webcomponents/custom-elements/custom-elements.min.js"></script>
+
   <!-- FontAwesome for mat-icon demo. -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
 </head>