feat(demo): add advanced property binding example

Author: tomastrajan

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

@@ -101,4 +101,46 @@ <h2>Use error <code>&#60;ng-template #error></code></h2>
       <pre [highlight]="codeExample3"></pre>
     </div>
   </div>
+
+  <h2>Advanced binding (objects instead of primitives)</h2>
+  <div class="content">
+    <div class="implementation" *ngIf="!example4">
+      <button mat-flat-button color="accent" (click)="example4 = true">
+        <mat-icon>play_arrow</mat-icon>
+        Run
+      </button>
+    </div>
+    <div class="implementation" *ngIf="example4">
+      <ng-template #loading>Loading...</ng-template>
+      <ng-template #error>Loading failed...</ng-template>
+      <ion-item
+        *axLazyElement="
+          'https://unpkg.com/@ionic/core@4.6.2/dist/ionic/ionic.js';
+          loadingTemplate: loading;
+          errorTemplate: error
+        "
+      >
+        <ion-label>Pick a year&nbsp;</ion-label>
+        <ion-datetime
+          [displayFormat]="'YYYY'"
+          [pickerFormat]="'YYYY'"
+          [yearValues]="customYearValues"
+        >
+        </ion-datetime>
+      </ion-item>
+    </div>
+    <div class="description">
+      <p>
+        In this example we're loading ionic! Ionic comes with all elements in
+        single bundle so we can use multiple ionic elements while using
+        <code>*axLazyElement</code> directive only on the outmost element.
+        Besides that in our Angular component we have defined
+        <code>customYearValues</code> array with the
+        <code>[2020, 2030, 2040]</code> values which are passed in the element
+        using standard Angular property binding
+        <code>[yearValues]="customYearValues"</code>.
+      </p>
+      <pre [highlight]="codeExample4"></pre>
+    </div>
+  </div>
 </div>

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

@@ -10,14 +10,17 @@ export class BasicComponent implements OnInit {
   example1 = false;
   example2 = false;
   example3 = false;
+  example4 = false;
 
   // example state
   counter = 0;
+  customYearValues = [2020, 2030, 2040];
 
   // example code examples
   codeExample1 = CODE_EXAMPLE_1;
   codeExample2 = CODE_EXAMPLE_2;
   codeExample3 = CODE_EXAMPLE_3;
+  codeExample4 = CODE_EXAMPLE_4;
 
   constructor() {}
 
@@ -45,3 +48,15 @@ const CODE_EXAMPLE_3 = `<!-- url = 'https://unpkg.com/wrong-url.js?module' -->;
 <mwc-button *axLazyElement="url; errorTemplate: error; module: true">
   Submit
 </mwc-button>`;
+
+const CODE_EXAMPLE_4 = `<!-- url = 'https://unpkg.com/@ionic/core@4.6.2/dist/ionic/ionic.js' -->;
+<!-- customYearValues = [2020, 2030, 2040] -->;
+<ion-item *axLazyElement="url">
+  <ion-label>Pick a year</ion-label>
+  <ion-datetime
+    [displayFormat]="'YYYY'"
+    [pickerFormat]="'YYYY'"
+    [yearValues]="customYearValues"
+  >
+  </ion-datetime>
+</ion-item>`;

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

@@ -59,3 +59,8 @@ blockquote {
     }
   }
 }
+
+// CUSTOMIZE CONSUMED WEB COMPONENTS
+ion-picker {
+  position: fixed !important;
+}