feat(demo): add how it works sections

projects/elements-demo/src/app/features/docs/api/api.component.html

@@ -58,7 +58,7 @@ <h2>LazyElementDirective</h2>
         <tr>
           <td>
             <pre>
-@Input('axLazyElementLoading')
+@Input('axLazyElementLoadingTemplate')
 loadingTemplateRef: TemplateRef&#60;any>;</pre
             >
           </td>
@@ -68,12 +68,39 @@ <h2>LazyElementDirective</h2>
               element bundle (or module) was loaded. To show loader we can
               create following template
               <code
-                >&#60;ng-template #spinner>Loading...&#60;/ng-template></code
+                >&#60;ng-template #loading>Loading...&#60;/ng-template></code
               >
               and then we have to reference it
               <code
-                >&#60;some-element *axLazyElement="url; loading:
-                spinner">&#60;/some-element></code
+                >&#60;some-element *axLazyElement="url; loadingTemplate:
+                loading">&#60;/some-element></code
+              >
+            </p>
+            <code color="accent">Optional</code>&nbsp;<code color="accent"
+              >Default: undefined</code
+            >
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <pre>
+@Input('axLazyElementErrorTemplate')
+errorTemplateRef: TemplateRef&#60;any>;</pre
+            >
+          </td>
+          <td>
+            <p>
+              Reference to Angular template which will be hich will be displayed
+              before the element bundle (or module) loading failed. To show
+              error message we can create following template
+              <code
+                >&#60;ng-template #error>Loading
+                failed...&#60;/ng-template></code
+              >
+              and then we have to reference it
+              <code
+                >&#60;some-element *axLazyElement="url; errorTemplate:
+                error">&#60;/some-element></code
               >
             </p>
             <code color="accent">Optional</code>&nbsp;<code color="accent"

projects/elements-demo/src/app/features/docs/getting-started/getting-started.component.html

@@ -35,7 +35,6 @@ <h1>Getting started</h1>
 
   <pre [highlight]="codeExampleAppModule"></pre>
 
-  <br />
   <p>
     and can use <code>*axLazyElement</code> in the template of our component...
   </p>
@@ -61,7 +60,6 @@ <h2>Using in other (and lazy loaded) modules</h2>
 
   <pre [highlight]="codeExampleModule"></pre>
 
-  <br />
   <p>
     Or import other module (most commonly <code>SharedModule</code>) which both
     imports and exports <code>LazyElementsModule</code>.

projects/elements-demo/src/app/features/docs/getting-started/getting-started.component.scss

@@ -4,6 +4,7 @@ ol {
 
 h2 {
   margin: 40px 0 10px 0;
+  font-weight: bold;
 }
 
 :host-context(.responsive-large) {

projects/elements-demo/src/app/features/docs/how-it-works/how-it-works.component.html

@@ -6,6 +6,11 @@ <h1>How it works</h1>
     element (or any other web component) and display it in the standard Angular
     component template.
   </p>
+  <blockquote>
+    In case you are wondering about possible use cases of this approach please
+    check out <a routerLink="../../motivation">motivation</a>
+    page to learn more...
+  </blockquote>
 
   <h2>Angular elements</h2>
 
@@ -45,16 +50,15 @@ <h2>
 
   <p>
     Let's say we have created an Angular element, for example
-    <code>&#60;my-org-customer-info-card>&#60;/my-org-customer-info-card></code>
+    <code>&#60;your-org-customer-editor>&#60;/your-org-customer-editor></code>
     and built and packaged it into a single bundle file
-    <code>my-org-customer-info-card.js</code>.
+    <code>your-org-customer-editor.js</code>.
   </p>
 
   <p>
     Usually we would have to include
     <code
-      >&#60;script
-      src="path/to/my-org-customer-info-card.js">&#60;/script></code
+      >&#60;script src="path/to/your-org-customer-editor.js">&#60;/script></code
     >
     in our <code>index.html</code> so that we can be sure that the element loads
     before it was used in the template of some component of our consumer app.
@@ -76,7 +80,55 @@ <h2>
   </p>
 
   <h2>
-    Much Better Way of using Angular elements (and other web components) in
-    Angular applications
+    Much Better Way of using Angular elements (and other web components)
   </h2>
+
+  <p>
+    Wouldn't it be better if we could use our elements in the same way as any
+    other HTML element while postpone their loading from some backend until the
+    very latest possible time?
+  </p>
+  <p>
+    More so wouldn't it be great if this happened automatically without the need
+    to manually trigger some kind of loading and retrieving of bundle?
+  </p>
+
+  <blockquote class="large">
+    What if all this could be achieved by using simple structural directive
+    <code>*axLazyElement</code>?
+  </blockquote>
+
+  <pre [highlight]="codeExampleComponent"></pre>
+
+  <p>
+    The <code>*axLazyElement</code> is a structural directive which means it
+    will <strong>remove</strong>
+    the element on which it was added from the DOM by default. This is very
+    useful because we DO NOT want to render element before it was actually
+    loaded from the backend!
+  </p>
+
+  <h2>Loading mechanism</h2>
+
+  <p>
+    Loading starts only once we want to display an Angular component which
+    renders given element in it's template. After that the loading goes through
+    the following process
+  </p>
+
+  <ol>
+    <li>
+      Check if we provided reference to <code>loading</code> template (<code
+        >&#60;ng-template #loading>Loading ...&#60;/ng-template></code
+      >) and display it in place of the element...
+    </li>
+    <li>Check if element was already loaded in the past</li>
+    <li>✅ remove loading template and render given element instead!</li>
+    <li>
+      ⬇️ create a <code>&#60;script></code> tag with <code>src = url</code> and
+      handler for the <code>onload</code>
+      event to notify directive when element was loaded
+    </li>
+    <li>Append <code>&#60;script></code> to the body</li>
+  </ol>
 </div>

projects/elements-demo/src/app/features/docs/how-it-works/how-it-works.component.scss

@@ -4,6 +4,7 @@ ol {
 
 h2 {
   margin: 40px 0 10px 0;
+  font-weight: bold;
 }
 
 :host-context(.responsive-large) {

projects/elements-demo/src/app/features/docs/how-it-works/how-it-works.component.spec.ts

@@ -1,4 +1,9 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { HighlightModule } from 'ngx-highlightjs';
+import typescript from 'highlight.js/lib/languages/typescript';
+
+import { SharedModule } from '../../../shared/shared.module';
 
 import { HowItWorksComponent } from './how-it-works.component';
 
@@ -8,6 +13,13 @@ describe('HowItWorksComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
+      imports: [
+        HighlightModule.forRoot({
+          languages: () => [{ name: 'typescript', func: typescript }]
+        }),
+        RouterTestingModule,
+        SharedModule
+      ],
       declarations: [HowItWorksComponent]
     }).compileComponents();
   }));

projects/elements-demo/src/app/features/docs/how-it-works/how-it-works.component.ts

@@ -6,7 +6,68 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./how-it-works.component.scss']
 })
 export class HowItWorksComponent implements OnInit {
+  codeExampleComponent = CODE_EXAMPLE_COMPONENT;
+  codeExampleComponentBinding = CODE_EXAMPLE_COMPONENT_BINDING;
+  codeExampleComponentLazy = CODE_EXAMPLE_COMPONENT_LAZY;
+
   constructor() {}
 
   ngOnInit() {}
 }
+
+const CODE_EXAMPLE_COMPONENT = `import { Component } from '@angular/core';
+
+@Component({
+  selector: 'your-org-feature',
+  template: \`
+    <your-org-customer-editor *axLazyElement="url"></your-org-customer-editor>
+  \`
+})
+export class FeatureComponent {
+  url = 'path/to/your-org-customer-editor.js';
+}
+`;
+
+const CODE_EXAMPLE_COMPONENT_LAZY = `import { Component } from '@angular/core';
+
+@Component({
+  selector: 'your-org-feature',
+  template: \`
+    <ng-container *ngIf="showEditor">
+      <your-org-customer-editor *axLazyElement="url"></your-org-customer-editor>
+    </ng-container>
+    <button (click)="toggleShowEditor()">Edit customer</button>
+  \`
+})
+export class FeatureComponent {
+  showEditor = false;
+
+  url = 'path/to/your-org-customer-editor.js';
+
+  toggleShowEditor() {
+    this.showEditor = !showEditor;
+  }
+}
+`;
+
+const CODE_EXAMPLE_COMPONENT_BINDING = `import { Component } from '@angular/core';
+
+@Component({
+  selector: 'your-org-feature',
+  template: \`
+    <your-org-customer-editor *axLazyElement="url"
+      [customerId]="customerId"
+      (customerDataChange)="handleCustomerDataChange($event)">
+    </your-org-customer-editor>
+  \`
+})
+export class FeatureComponent {
+  url = 'path/to/your-org-customer-editor.js';
+
+  customerId = 'C-123-456';
+
+  handleCustomerDataChange(change) {
+    // handle change ...
+  }
+}
+`;

projects/elements-demo/src/app/features/docs/how-it-works/how-it-works.module.ts

@@ -1,11 +1,19 @@
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { HighlightModule } from 'ngx-highlightjs';
+
+import { SharedModule } from '../../../shared/shared.module';
 
 import { HowItWorksRoutingModule } from './how-it-works-routing.module';
 import { HowItWorksComponent } from './how-it-works.component';
 
 @NgModule({
   declarations: [HowItWorksComponent],
-  imports: [CommonModule, HowItWorksRoutingModule]
+  imports: [
+    RouterModule,
+    HighlightModule,
+    SharedModule,
+    HowItWorksRoutingModule
+  ]
 })
 export class HowItWorksModule {}

projects/elements-demo/src/app/features/docs/motivation/motivation.component.scss

@@ -0,0 +1,14 @@
+ol {
+  margin: 0 0 20px 0;
+}
+
+h2 {
+  margin: 40px 0 10px 0;
+  font-weight: bold;
+}
+
+:host-context(.responsive-large) {
+  .wrapper {
+    width: 70%;
+  }
+}

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

@@ -2,8 +2,18 @@ <h1>Basic</h1>
 
 <div class="content">
   <div class="implementation">
+    <ng-template #error>Loading failed...</ng-template>
     <ng-template #loading>Loading...</ng-template>
-    <mwc-button raised (click)="increment()">
+    <mwc-button
+      *axLazyElement="
+        'https://unpkg.com/@material/mwc-button@0.6.0/mwc-button.js?module';
+        loadingTemplate: loading;
+        errorTemplate: error;
+        module: true
+      "
+      raised
+      (click)="increment()"
+    >
       Increment
     </mwc-button>
 

projects/elements-demo/src/styles-reset.scss

@@ -24,6 +24,7 @@ code {
 pre {
   border-radius: 10px;
   padding: 20px !important;
+  margin: 0 0 20px 0;
 }
 
 p {
@@ -39,4 +40,12 @@ blockquote {
   padding: 10px 20px;
   border-left: 2px solid;
   margin: 20px 0;
+
+  &.large {
+    font-style: normal;
+    border: 0;
+    font-size: 2em;
+    line-height: 1.6em;
+    padding: 10px 60px;
+  }
 }