feat(demo): improve dynamic example docs

angular-extensions · Sep 28, 2019 · c23b904 · c23b904
1 parent 1f383aa
commit c23b904
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 13 deletions.
diff --git a/projects/elements-demo/src/app/features/examples/dynamic/dynamic.component.html b/projects/elements-demo/src/app/features/examples/dynamic/dynamic.component.html
@@ -19,31 +19,39 @@ <h2>Dynamic element tag</h2>
     </div>
     <div class="implementation" *ngIf="example1">
       <ng-template #loading>Loading...</ng-template>
-      <div
+      <ax-lazy-element
         *axLazyElementDynamic="
           'mwc-button';
           url: 'https://unpkg.com/@material/mwc-button@0.6.0/mwc-button.js?module';
           loadingTemplate: loading;
           module: true
         "
-        outlined
+        [outlined]="true"
         (click)="increment1()"
       >
         Increment
-      </div>
+      </ax-lazy-element>
       <p>Counter: {{ counter1 }}</p>
     </div>
     <div class="description">
       <p>
         In this example we're loading
         <code>&#60;mwc-button></code> using the
         <code>*axLazyElementDynamic</code> directive. Please notice that the
-        original HTML element used in the template is <code>&#60;div></code> and
-        we're specifying the desired tag as the first parameter of
+        original HTML element used in the template is
+        <code>&#60;ax-lazy-element></code> and we're specifying the desired tag
+        as the first parameter of
         <code>*axLazyElementDynamic='mwc-button'</code>. Please, feel free to
         open your browsers dev tools to check resulting element tag!
       </p>
       <pre [highlight]="codeExample1"></pre>
+      <p>
+        You might be asking why do we use <code>&#60;ax-lazy-element></code>.
+        This is not a real custom element and that's exactly the point. We can
+        provide any valid and unused custom element name. That way Angular won't
+        complain if we use custom property and event binding which would be the
+        case if we tried to bind <code>&#60;div [custom]="value"></code>...
+      </p>
     </div>
   </div>
 
@@ -57,12 +65,12 @@ <h2>Dynamic element tag with module configuration</h2>
     </div>
     <div class="implementation" *ngIf="example2">
       <ng-template #loading>Loading...</ng-template>
-      <div
+      <ax-lazy-element
         *axLazyElementDynamic="'wired-button'; loadingTemplate: loading"
         (click)="increment2()"
       >
         Increment
-      </div>
+      </ax-lazy-element>
       <p>Counter: {{ counter2 }}</p>
     </div>
     <div class="description">

diff --git a/projects/elements-demo/src/app/features/examples/dynamic/dynamic.component.ts b/projects/elements-demo/src/app/features/examples/dynamic/dynamic.component.ts
@@ -33,19 +33,19 @@ export class DynamicComponent implements OnInit {
 }
 
 export const CODE_EXAMPLE_1 = `<!-- url = 'https://unpkg.com/@material/mwc-button@0.6.0/mwc-button.js?module' -->;
-<div *axLazyElementDynamic="'mwc-button', url: url; module: true"
-     outlined
+<ax-lazy-element *axLazyElementDynamic="'mwc-button', url: url; module: true"
+     [outlined]="true"
      (click)="increment()">
   Increment
-</div>
+</ax-lazy-element>
 
 <!-- will be rendered as ...
   <mwc-button outlined (click)="increment()">Increment</mwc-button>
 -->`;
 
-export const CODE_EXAMPLE_2_HTML = `<div *axLazyElementDynamic="'wired-button'" (click)="increment()">
+export const CODE_EXAMPLE_2_HTML = `<ax-lazy-element *axLazyElementDynamic="'wired-button'" (click)="increment()">
   Increment
-</div>
+</ax-lazy-element>
 
 <!-- will be rendered as ...
   <wired-button (click)="increment()">Increment</wired-button>

diff --git a/projects/elements-demo/src/app/features/examples/dynamic/dynamic.module.ts b/projects/elements-demo/src/app/features/examples/dynamic/dynamic.module.ts
@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { HighlightModule } from 'ngx-highlightjs';
 
 import {
@@ -22,6 +22,7 @@ const options: LazyElementModuleOptions = {
 };
 
 @NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   declarations: [DynamicComponent],
   imports: [
     HighlightModule,