feat(demo): enhance how-it-works page content

Author: tomastrajan

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

@@ -108,7 +108,77 @@ <h2>
     loaded from the backend!
   </p>
 
-  <h2>Loading mechanism</h2>
+  <h2>Using standard Angular template binding</h2>
+
+  <p>
+    Once our element is loaded we can use standard Angular template binding
+    syntax like
+    <code>[customerId]="customerId"</code> and
+    <code>(customerDataChange)="handleCustomerDataChange($event)"</code>
+    to pass in data and react to events. It works just as expected!
+  </p>
+
+  <pre [highlight]="codeExampleComponentBinding"></pre>
+
+  <h2>Seamless lazy loading</h2>
+
+  <p>
+    As mentioned above, our goal is to lazy-load element to improve application
+    startup time by decreasing size of javascript which has to be downloaded
+    initially.
+  </p>
+
+  <p>
+    Lazy loading with <code>*axLazyElements</code> happens automatically
+    whenever the element is rendered in the template of some Angular component.
+    Consider the following example...
+  </p>
+
+  <pre [highlight]="codeExampleComponentLazy"></pre>
+
+  <p>
+    We're using
+    <code
+      >&#60;your-org-customer-editor
+      *axLazyElement="url">&#60;/your-org-customer-editor></code
+    >
+    in the components template but it will not trigger element loading just yet.
+    As we may notice, the element is wrapped in the
+    <code>&#60;ng-container>&#60;/ng-container></code> which uses
+    <code>*ngIf</code>
+    directive so our element is not rendered until we click the button...
+  </p>
+
+  <blockquote class="large">
+    The loading of element will be triggered only after we clicked the button
+    and rendered element for real in the component template
+  </blockquote>
+
+  <p>
+    To summarize, the element loading will be postponed until it was rendered in
+    the template of some component. This can happen in following cases...
+  </p>
+
+  <ul>
+    <li>Angular component uses element in its template</li>
+    <li>
+      Angular component uses element in its template conditionally
+      (<code>*ngIf</code>, <code>*ngFor</code>, ...) and the condition was
+      fulfilled
+    </li>
+    <li>
+      User navigated to an Angular component which uses element in its template
+      (can be both eagerly or lazily loaded routes)
+    </li>
+  </ul>
+
+  <blockquote>
+    This also means that if we used element in a component that is displayed
+    straight from application startup, we would also trigger loading of the
+    element bundle so it will NOT be lazy in that case
+  </blockquote>
+
+  <h2>In-depth overview of loading mechanism</h2>
 
   <p>
     Loading starts only once we want to display an Angular component which
@@ -123,12 +193,21 @@ <h2>Loading mechanism</h2>
       >) 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>✅ 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
+      handler for the <code>onload</code> and <code>onerror</code>
+      events to notify directive when element was loaded or failed to load
+    </li>
+    <li>Append <code>&#60;script></code> to the document body</li>
+    <li>Once loaded, notify directive about the outcome</li>
+    <li>
+      ✅ remove loading template and render given element when loading was
+      successful
+    </li>
+    <li>
+      ❌ remove loading template and render error template (if provided) when
+      loading was not successful
     </li>
-    <li>Append <code>&#60;script></code> to the body</li>
   </ol>
 </div>