Skip to content

Commit c8a1556

Browse files
tomastrajantomastrajan
committed
feat(demo/examples): add examples showcasing new configuration options
1 parent f849602 commit c8a1556

File tree

3 files changed

+149
-99
lines changed

3 files changed

+149
-99
lines changed

‎projects/elements-demo/src/app/features/examples/advanced/advanced.component.html‎

Lines changed: 113 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,113 @@
1-
<div class="wrapper">
2-
<h1>Advanced</h1>
3-
4-
<h2>Elements configured in module</h2>
5-
<div class="content">
6-
<div class="implementation" *ngIf="!example1">
7-
<button mat-flat-button color="accent" (click)="example1 = true">
8-
<mat-icon>play_arrow</mat-icon>
9-
Run
10-
</button>
11-
</div>
12-
<div class="implementation" *ngIf="example1">
13-
<ion-button *axLazyElement (click)="increment()">Click me</ion-button>
14-
<p>Counter: {{ counter }}</p>
15-
</div>
16-
<div class="description">
17-
<p>
18-
In this example we're pre-configuring
19-
<code>LazyElementsModule</code> with the element config. That way we
20-
don't have to specify url of the element in the
21-
<code>*axLazyElement</code> directive. The element will be lazy-loaded
22-
the same way as if we specified url directly.
23-
</p>
24-
<pre [highlight]="codeExample1html"></pre>
25-
<pre [highlight]="codeExample1module"></pre>
26-
</div>
27-
</div>
28-
29-
<h2>Elements configured in module with HTML inline options</h2>
30-
<div class="content">
31-
<div class="implementation" *ngIf="!example2">
32-
<button mat-flat-button color="accent" (click)="example2 = true">
33-
<mat-icon>play_arrow</mat-icon>
34-
Run
35-
</button>
36-
</div>
37-
<div class="implementation" *ngIf="example2">
38-
<ng-template #loading>Loading...</ng-template>
39-
<mwc-checkbox
40-
*axLazyElement="null; module: true; loadingTemplate: loading"
41-
>Click me</mwc-checkbox
42-
>
43-
</div>
44-
<div class="description">
45-
<p>
46-
We don't have to specify <code>url</code> when using pre-configured
47-
<code>LazyElementsModule</code>. We still might need to pass in
48-
<code>null</code> url into <code>*axLazyElement</code> directive in case
49-
we want to use other options like <code>module</code> or
50-
<code>loadingTemplate</code>.
51-
</p>
52-
<pre [highlight]="codeExample2html"></pre>
53-
<pre [highlight]="codeExample2module"></pre>
54-
<pre [highlight]="codeExample2coreModule"></pre>
55-
</div>
56-
</div>
57-
58-
<h2>Elements configured in module with <code>isModule</code> option</h2>
59-
<div class="content">
60-
<div class="implementation" *ngIf="!example3">
61-
<button mat-flat-button color="accent" (click)="example3 = true">
62-
<mat-icon>play_arrow</mat-icon>
63-
Run
64-
</button>
65-
</div>
66-
<div class="implementation" *ngIf="example3">
67-
<ng-template #loading>Loading...</ng-template>
68-
<mwc-switch *axLazyElement="null; loadingTemplate: loading">
69-
Click me</mwc-switch
70-
>
71-
</div>
72-
<div class="description">
73-
<p>
74-
We can also pre-configure <code>isModule</code> flag by passing it to
75-
the <code>LazyElementsModule</code>config. That way we don't have to
76-
specify it in the template for module style elements!
77-
</p>
78-
<pre [highlight]="codeExample3html"></pre>
79-
<pre [highlight]="codeExample3module"></pre>
80-
</div>
81-
</div>
82-
</div>
1+
<div class="wrapper">
2+
<h1>Advanced</h1>
3+
4+
<h2>Elements configured in a feature module</h2>
5+
<div class="content">
6+
<div class="implementation" *ngIf="!example1">
7+
<button mat-flat-button color="accent" (click)="example1 = true">
8+
<mat-icon>play_arrow</mat-icon>
9+
Run
10+
</button>
11+
</div>
12+
<div class="implementation" *ngIf="example1">
13+
<ion-button *axLazyElement (click)="increment()">Click me</ion-button>
14+
<p>Counter: {{ counter }}</p>
15+
</div>
16+
<div class="description">
17+
<p>
18+
In this example we're pre-configuring
19+
<code>LazyElementsModule</code> with the element config. That way we
20+
don't have to specify url of the element in the
21+
<code>*axLazyElement</code> directive. The element will be lazy-loaded
22+
the same way as if we specified url directly.
23+
</p>
24+
<pre [highlight]="codeExample1html"></pre>
25+
<pre [highlight]="codeExample1module"></pre>
26+
</div>
27+
</div>
28+
29+
<h2>Elements configured in a feature module with HTML inline options</h2>
30+
<div class="content">
31+
<div class="implementation" *ngIf="!example2">
32+
<button mat-flat-button color="accent" (click)="example2 = true">
33+
<mat-icon>play_arrow</mat-icon>
34+
Run
35+
</button>
36+
</div>
37+
<div class="implementation" *ngIf="example2">
38+
<ng-template #loading>Loading...</ng-template>
39+
<mwc-checkbox
40+
*axLazyElement="null; module: true; loadingTemplate: loading"
41+
>Click me</mwc-checkbox
42+
>
43+
</div>
44+
<div class="description">
45+
<p>
46+
We don't have to specify <code>url</code> when using pre-configured
47+
<code>LazyElementsModule</code>. We still might need to pass in
48+
<code>null</code> url into <code>*axLazyElement</code> directive in case
49+
we want to use other options like <code>module</code> or
50+
<code>loadingTemplate</code>.
51+
</p>
52+
<pre [highlight]="codeExample2html"></pre>
53+
<pre [highlight]="codeExample2module"></pre>
54+
</div>
55+
</div>
56+
57+
<h2>
58+
Elements configured in a feature module with <code>isModule</code> option
59+
</h2>
60+
<div class="content">
61+
<div class="implementation" *ngIf="!example3">
62+
<button mat-flat-button color="accent" (click)="example3 = true">
63+
<mat-icon>play_arrow</mat-icon>
64+
Run
65+
</button>
66+
</div>
67+
<div class="implementation" *ngIf="example3">
68+
<ng-template #loading>Loading...</ng-template>
69+
<mwc-switch *axLazyElement="null; loadingTemplate: loading">
70+
Click me</mwc-switch
71+
>
72+
</div>
73+
<div class="description">
74+
<p>
75+
We can also pre-configure <code>isModule</code> flag by passing it to
76+
the <code>LazyElementsModule</code>config. That way we don't have to
77+
specify it in the template for module style elements!
78+
</p>
79+
<pre [highlight]="codeExample3html"></pre>
80+
<pre [highlight]="codeExample3module"></pre>
81+
</div>
82+
</div>
83+
84+
<h2>
85+
Elements configured in <code>AppModule</code> or
86+
<code>CoreModule</code> using <code>forRoot</code>
87+
</h2>
88+
<div class="content">
89+
<div class="implementation" *ngIf="!example4">
90+
<button mat-flat-button color="accent" (click)="example4 = true">
91+
<mat-icon>play_arrow</mat-icon>
92+
Run
93+
</button>
94+
</div>
95+
<div class="implementation" *ngIf="example4">
96+
<mwc-fab icon="code" *axLazyElement></mwc-fab>
97+
</div>
98+
<div class="description">
99+
<p>
100+
Some options can be pre-configured for the whole application using
101+
<code>LazyElementsModule.forRoot()</code>. This is usually done in
102+
<code>AppModule</code> or in the <code>CoreModule</code>. That way we
103+
don't have to specify this options in the feature modules while still
104+
preserving posibility to override them if necessary. The
105+
<code>forRoot()</code> accepts also <code>elementConfigs</code> so they
106+
can be pre-configured centrally removing the need to configure them in
107+
feature modules or inline in the templates.
108+
</p>
109+
<pre [highlight]="codeExample4html"></pre>
110+
<pre [highlight]="codeExample4coreModule"></pre>
111+
</div>
112+
</div>
113+
</div>

‎projects/elements-demo/src/app/features/examples/advanced/advanced.component.ts‎

Lines changed: 30 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,17 @@ export class AdvancedComponent implements OnInit {
1010
example1 = false;
1111
example2 = false;
1212
example3 = false;
13+
example4 = false;
1314

1415
// example code examples
1516
codeExample1module = CODE_EXAMPLE_1_MODULE;
1617
codeExample1html = CODE_EXAMPLE_1_HTML;
1718
codeExample2module = CODE_EXAMPLE_2_MODULE;
18-
codeExample2coreModule = CODE_EXAMPLE_2_CORE_MODULE;
1919
codeExample2html = CODE_EXAMPLE_2_HTML;
2020
codeExample3module = CODE_EXAMPLE_3_MODULE;
2121
codeExample3html = CODE_EXAMPLE_3_HTML;
22+
codeExample4html = CODE_EXAMPLE_4_HTML;
23+
codeExample4coreModule = CODE_EXAMPLE_4_CORE_MODULE;
2224

2325
// example state
2426
counter = 0;
@@ -77,22 +79,6 @@ const options: LazyElementModuleOptions = {
7779
export class FeatureModule { }
7880
`;
7981

80-
const CODE_EXAMPLE_2_CORE_MODULE = `// pre-configured LazyElementsModule in CoreModule or AppModule
81-
const options: LazyElementModuleRootOptions = {
82-
rootOptions: {
83-
errorComponent: RootErrorComponent
84-
}
85-
};
86-
87-
@NgModule({
88-
schemas: [CUSTOM_ELEMENTS_SCHEMA],
89-
imports: [
90-
LazyElementsModule.forRoot(options),
91-
]
92-
})
93-
export class CoreModule { }
94-
`;
95-
9682
const CODE_EXAMPLE_2_HTML = `<!-- We have to specify null; url to be able to pass in additional options -->
9783
<mwc-checkbox *axLazyElement="null; module: true; loadingTemplate: loading;"></mwc-checkbox>`;
9884

@@ -119,3 +105,30 @@ export class FeatureModule { }
119105

120106
const CODE_EXAMPLE_3_HTML = `<!-- We have to specify null; url to be able to pass in additional options -->
121107
<mwc-switch *axLazyElement="null; loadingTemplate: loading;"></mwc-switch>`;
108+
109+
const CODE_EXAMPLE_4_HTML = `<!-- This can be used in any place in the whole application -->
110+
<mwc-fab icon="code" *axLazyElement></mwc-fab>`;
111+
112+
const CODE_EXAMPLE_4_CORE_MODULE = `// pre-configured LazyElementsModule in CoreModule or AppModule
113+
const options: LazyElementModuleRootOptions = {
114+
rootOptions: {
115+
errorComponent: RootErrorComponent
116+
loadingComponent: RootSpinnerComponent
117+
isModule: true
118+
},
119+
elementConfigs: [
120+
{
121+
tag: 'mwc-switch',
122+
url: 'https://unpkg.com/@material/mwc-switch@0.6.0/mwc-switch.js?module'
123+
}
124+
]
125+
};
126+
127+
@NgModule({
128+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
129+
imports: [
130+
LazyElementsModule.forRoot(options),
131+
]
132+
})
133+
export class CoreModule { }
134+
`;

‎projects/elements-demo/src/app/features/examples/advanced/advanced.module.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,12 @@ const options: LazyElementModuleOptions = {
3131
url:
3232
'https://unpkg.com/@material/mwc-checkbox@0.6.0/mwc-checkbox.js?module',
3333
isModule: true
34+
},
35+
{
36+
tag: 'mwc-fab',
37+
url: 'https://unpkg.com/@material/mwc-fab@0.6.0/mwc-fab.js?module',
38+
isModule: true,
39+
loadingComponent: SpinnerComponent
3440
}
3541
]
3642
};

0 commit comments

Comments
 (0)