feat: add Stencil example

angular-extensions · Jul 29, 2019 · e7a7132 · e7a7132
1 parent b59149f
commit e7a7132
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 0 deletions.
diff --git a/projects/elements-demo/src/app/features/examples/basic/basic.component.html b/projects/elements-demo/src/app/features/examples/basic/basic.component.html
@@ -143,4 +143,37 @@ <h2>Advanced binding (objects instead of primitives)</h2>
       <pre [highlight]="codeExample4"></pre>
     </div>
   </div>
+
+  <div class="content">
+    <div class="implementation" *ngIf="!example5">
+      <button mat-flat-button color="accent" (click)="example5 = true">
+        <mat-icon>play_arrow</mat-icon>
+        Run
+      </button>
+    </div>
+    <div class="implementation" *ngIf="example5">
+      <ng-template #loading>Loading...</ng-template>
+      <ng-template #error>Loading failed...</ng-template>
+      <deckgo-qrcode
+        *axLazyElement="
+          'https://unpkg.com/@deckdeckgo/qrcode@1.0.0-alpha.9/dist/deckdeckgo-qrcode/deckdeckgo-qrcode.js';
+          loadingTemplate: loading;
+          errorTemplate: error
+        "
+        content="https://angular-extensions.github.io/elements"
+        style="--deckgo-qrcode-size: 200px;"
+      >
+      </deckgo-qrcode>
+    </div>
+    <div class="description">
+      <p>
+        Cool things about the above Ionic example? Ionic is build with Stencil
+        and therefore, each Web Components developed and bundled with that
+        compiler, could also be load the exact same way as for example for the
+        following <code>&#60;deckgo-qrcode></code> component from the project
+        DeckDeckGo which generates and displays a QR-Code.
+      </p>
+      <pre [highlight]="codeExample5"></pre>
+    </div>
+  </div>
 </div>
diff --git a/projects/elements-demo/src/app/features/examples/basic/basic.component.ts b/projects/elements-demo/src/app/features/examples/basic/basic.component.ts
@@ -11,6 +11,7 @@ export class BasicComponent implements OnInit {
   example2 = false;
   example3 = false;
   example4 = false;
+  example5 = false;
 
   // example state
   counter = 0;
@@ -21,6 +22,7 @@ export class BasicComponent implements OnInit {
   codeExample2 = CODE_EXAMPLE_2;
   codeExample3 = CODE_EXAMPLE_3;
   codeExample4 = CODE_EXAMPLE_4;
+  codeExample5 = CODE_EXAMPLE_5;
 
   constructor() {}
 
@@ -60,3 +62,7 @@ const CODE_EXAMPLE_4 = `<!-- url = 'https://unpkg.com/@ionic/core@4.6.2/dist/ion
   >
   </ion-datetime>
 </ion-item>`;
+
+const CODE_EXAMPLE_5 = `<!-- url = 'https://unpkg.com/@deckdeckgo/qrcode@1.0.0-alpha.9/dist/deckdeckgo-qrcode/deckdeckgo-qrcode.js' -->;
+<deckgo-qrcode *axLazyElement="url" content="https://angular-extensions.github.io/elements" style="--deckgo-qrcode-size: 300px;">
+</deckgo-qrcode>`;