feat(demo): add examples content

Author: tomastrajan

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

@@ -30,7 +30,7 @@ <h2>Plain directive</h2>
     </div>
   </div>
 
-  <h2>Use loading <code>&#60;ng-template></code></h2>
+  <h2>Use loading <code>&#60;ng-template #loading></code></h2>
   <div class="content">
     <div class="implementation" *ngIf="!example2">
       <button mat-flat-button color="accent" (click)="example2 = true">
@@ -39,13 +39,11 @@ <h2>Use loading <code>&#60;ng-template></code></h2>
       </button>
     </div>
     <div class="implementation" *ngIf="example2">
-      <ng-template #error>Loading failed...</ng-template>
       <ng-template #loading>Loading...</ng-template>
       <mwc-button
         *axLazyElement="
           'https://unpkg.com/@material/mwc-button@0.6.0/mwc-button.js?module';
           loadingTemplate: loading;
-          errorTemplate: error;
           module: true
         "
         raised
@@ -61,10 +59,46 @@ <h2>Use loading <code>&#60;ng-template></code></h2>
         <code>&#60;mwc-button></code> using the
         <code>*axLazyElement</code> directive but we're also adding
         <code>&#60;ng-template #loading>Loading...&#60;ng-template></code> which
-        will display before the element was loaded (depending on your connection
-        speed)
+        will be displayed before the element was loaded (depending on your
+        connection speed)
       </p>
       <pre [highlight]="codeExample2"></pre>
     </div>
   </div>
+
+  <h2>Use error <code>&#60;ng-template #error></code></h2>
+  <div class="content">
+    <div class="implementation" *ngIf="!example3">
+      <button mat-flat-button color="accent" (click)="example3 = true">
+        <mat-icon>play_arrow</mat-icon>
+        Run
+      </button>
+    </div>
+    <div class="implementation" *ngIf="example3">
+      <ng-template #loading>Loading...</ng-template>
+      <ng-template #error>Loading failed...</ng-template>
+      <mwc-button
+        *axLazyElement="
+          'https://unpkg.com/wrong-url.js?module';
+          loadingTemplate: loading;
+          errorTemplate: error;
+          module: true
+        "
+        raised
+      >
+        Submit
+      </mwc-button>
+    </div>
+    <div class="description">
+      <p>
+        In this example we're loading
+        <code>&#60;mwc-button></code> using the
+        <code>*axLazyElement</code> directive but we're also adding
+        <code>&#60;ng-template #error>Loading failed...&#60;ng-template></code>
+        which will be displayed because the loading request will fail (wrong
+        url)
+      </p>
+      <pre [highlight]="codeExample3"></pre>
+    </div>
+  </div>
 </div>

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

@@ -9,13 +9,15 @@ export class BasicComponent implements OnInit {
   // example toggles
   example1 = false;
   example2 = false;
+  example3 = false;
 
   // example state
   counter = 0;
 
   // example code examples
   codeExample1 = CODE_EXAMPLE_1;
   codeExample2 = CODE_EXAMPLE_2;
+  codeExample3 = CODE_EXAMPLE_3;
 
   constructor() {}
 
@@ -37,3 +39,9 @@ const CODE_EXAMPLE_2 = `<!-- url = 'https://unpkg.com/@material/mwc-button@0.6.0
             (click)="increment()">
   Increment
 </mwc-button>`;
+
+const CODE_EXAMPLE_3 = `<!-- url = 'https://unpkg.com/wrong-url.js?module' -->;
+<ng-template #error>Loading failed...</ng-template>
+<mwc-button *axLazyElement="url; errorTemplate: error; module: true">
+  Submit
+</mwc-button>`;