Skip to content

Commit 1ee9c5f

Browse files
authored
chore(demo): add examples to demo app (#11018)
* chore(demo): add examples to demo app * fix aot
1 parent b24308c commit 1ee9c5f

File tree

17 files changed

+182
-7
lines changed

17 files changed

+182
-7
lines changed

.github/CODEOWNERS

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,8 @@
109109
/src/demo-app/demo-app/** @jelbourn
110110
/src/demo-app/dialog/** @jelbourn @crisbeto
111111
/src/demo-app/drawer/** @mmalerba
112+
/src/demo-app/example/** @andrewseguin
113+
/src/demo-app/examples-page/** @andrewseguin
112114
/src/demo-app/expansion/** @josephperrott
113115
/src/demo-app/focus-origin/** @mmalerba
114116
/src/demo-app/gestures/** @jelbourn

package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,10 @@
3030
"@angular/common": "6.0.0-rc.6",
3131
"@angular/compiler": "6.0.0-rc.6",
3232
"@angular/core": "6.0.0-rc.6",
33+
"@angular/elements": "6.0.0-rc.6",
3334
"@angular/forms": "6.0.0-rc.6",
3435
"@angular/platform-browser": "6.0.0-rc.6",
36+
"@webcomponents/custom-elements": "^1.1.0",
3537
"core-js": "^2.4.1",
3638
"rxjs": "6.0.0",
3739
"systemjs": "0.19.43",

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ export class Home {}
4848
export class DemoApp {
4949
dark = false;
5050
navItems = [
51+
{name: 'Examples', route: '/examples'},
5152
{name: 'Autocomplete', route: '/autocomplete'},
5253
{name: 'Badge', route: '/badge'},
5354
{name: 'Bottom sheet', route: '/bottom-sheet'},

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

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,12 @@
99
import {LayoutModule} from '@angular/cdk/layout';
1010
import {FullscreenOverlayContainer, OverlayContainer} from '@angular/cdk/overlay';
1111
import {CommonModule} from '@angular/common';
12-
import {NgModule} from '@angular/core';
12+
import {Injector, NgModule} from '@angular/core';
1313
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
1414
import {RouterModule} from '@angular/router';
15+
import {createCustomElement} from '@angular/elements';
16+
import {EXAMPLE_COMPONENTS, ExampleModule} from '@angular/material-examples';
17+
1518
import {AutocompleteDemo} from '../autocomplete/autocomplete-demo';
1619
import {BadgeDemo} from '../badge/badge-demo';
1720
import {BaselineDemo} from '../baseline/baseline-demo';
@@ -65,9 +68,13 @@ import {TypographyDemo} from '../typography/typography-demo';
6568
import {DemoApp, Home} from './demo-app';
6669
import {DEMO_APP_ROUTES} from './routes';
6770
import {PaginatorDemo} from '../paginator/paginator-demo';
71+
import {ExamplesPage} from '../examples-page/examples-page';
72+
import {MaterialExampleModule} from '../example/example-module';
6873

6974
@NgModule({
7075
imports: [
76+
MaterialExampleModule,
77+
ExampleModule,
7178
CommonModule,
7279
FormsModule,
7380
ReactiveFormsModule,
@@ -78,6 +85,7 @@ import {PaginatorDemo} from '../paginator/paginator-demo';
7885
TreeDemoModule,
7986
],
8087
declarations: [
88+
ExamplesPage,
8189
AutocompleteDemo,
8290
BadgeDemo,
8391
BaselineDemo,
@@ -155,4 +163,12 @@ import {PaginatorDemo} from '../paginator/paginator-demo';
155163
SpaghettiPanel,
156164
],
157165
})
158-
export class DemoModule {}
166+
export class DemoModule {
167+
constructor(injector: Injector) {
168+
// Register examples as custom elements so that they can be inserted into the DOM dynamically
169+
Object.keys(EXAMPLE_COMPONENTS).forEach(key => {
170+
const element = createCustomElement(EXAMPLE_COMPONENTS[key].component, {injector});
171+
customElements.define(key, element);
172+
});
173+
}
174+
}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ import {BadgeDemo} from '../badge/badge-demo';
5656
import {ConnectedOverlayDemo} from '../connected-overlay/connected-overlay-demo';
5757
import {PaginatorDemo} from '../paginator/paginator-demo';
5858

59+
import {ExamplesPage} from '../examples-page/examples-page';
5960

6061
export const DEMO_APP_ROUTES: Routes = [
6162
{path: '', component: DemoApp, children: [
@@ -105,6 +106,7 @@ export const DEMO_APP_ROUTES: Routes = [
105106
{path: 'stepper', component: StepperDemo},
106107
{path: 'screen-type', component: ScreenTypeDemo},
107108
{path: 'connected-overlay', component: ConnectedOverlayDemo},
109+
{path: 'examples', component: ExamplesPage}
108110
]}
109111
];
110112

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

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {Component, Input} from '@angular/core';
10+
import {EXAMPLE_COMPONENTS} from '@angular/material-examples';
11+
12+
/** Displays a set of material examples in a mat-accordion. */
13+
@Component({
14+
selector: 'material-example-list',
15+
template: `
16+
<h2> {{type}} Examples </h2>
17+
<mat-accordion>
18+
<mat-expansion-panel *ngFor="let id of ids">
19+
<mat-expansion-panel-header>
20+
{{id}}: {{exampleComponents[id].title}}
21+
</mat-expansion-panel-header>
22+
<ng-template matExpansionPanelContent>
23+
<material-example [id]="id"></material-example>
24+
</ng-template>
25+
</mat-expansion-panel>
26+
</mat-accordion>
27+
`,
28+
styles: [`
29+
h2 {
30+
text-transform: capitalize;
31+
}
32+
`]
33+
})
34+
export class ExampleList {
35+
/** Type of examples being displayed. */
36+
@Input() type: string;
37+
38+
/** IDs of the examples to display. */
39+
@Input() ids: string[];
40+
41+
exampleComponents = EXAMPLE_COMPONENTS;
42+
}
Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {CommonModule} from '@angular/common';
10+
import {MatExpansionModule} from '@angular/material';
11+
import {NgModule} from '@angular/core';
12+
13+
import {ExampleList} from './example-list';
14+
import {Example} from './example';
15+
16+
@NgModule({
17+
imports: [MatExpansionModule, CommonModule],
18+
declarations: [Example, ExampleList],
19+
exports: [Example, ExampleList]
20+
})
21+
export class MaterialExampleModule {}

src/demo-app/example/example.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {Component, ElementRef, Input} from '@angular/core';
10+
11+
@Component({
12+
selector: 'material-example',
13+
template: '',
14+
})
15+
export class Example {
16+
/** ID of the material example to display. */
17+
@Input() id: string;
18+
19+
constructor(private elementRef: ElementRef) { }
20+
21+
ngOnInit() {
22+
const element = document.createElement(this.id);
23+
this.elementRef.nativeElement.appendChild(element);
24+
}
25+
}
Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {Component} from '@angular/core';
10+
import {EXAMPLE_COMPONENTS} from '@angular/material-examples';
11+
12+
/** Renders all material examples listed in the generated EXAMPLE_COMPONENTS. */
13+
@Component({
14+
template: `<material-example-list [ids]="examples"></material-example-list>`
15+
})
16+
export class ExamplesPage {
17+
examples = Object.keys(EXAMPLE_COMPONENTS);
18+
}

src/demo-app/index.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,13 @@
1111
<link href="theme.css" rel="stylesheet">
1212
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
1313

14+
<script>
15+
if (customElements) {
16+
customElements.forcePolyfill = true;
17+
}
18+
</script>
19+
<script src="node_modules/@webcomponents/custom-elements/custom-elements.min.js"></script>
20+
1421
<!-- FontAwesome for mat-icon demo. -->
1522
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
1623
</head>

0 commit comments

Comments
 (0)