feat(demo): improve docs, add download badge

angular-extensions · Feb 13, 2020 · 8f0fe6c · 8f0fe6c
1 parent 0cda94e
commit 8f0fe6c
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 1 deletion.
diff --git a/projects/elements-demo/src/app/core/layout/toolbar/toolbar.component.html b/projects/elements-demo/src/app/core/layout/toolbar/toolbar.component.html
@@ -25,6 +25,11 @@
       (isResponsiveLayout | async) ? '' : '@angular-extensions/'
     }}elements</span
   >
+  <img
+    *ngIf="!(isResponsiveLayout | async)"
+    alt="downloads per month"
+    src="https://img.shields.io/npm/dm/@angular-extensions/elements"
+  />
   <iframe
     *ngIf="!(isResponsiveLayout | async)"
     allowtransparency="true"

diff --git a/projects/elements-demo/src/app/core/layout/toolbar/toolbar.component.scss b/projects/elements-demo/src/app/core/layout/toolbar/toolbar.component.scss
@@ -26,6 +26,10 @@ iframe {
   margin: 0 0 0 10px;
 }
 
+img {
+  margin: 0 0 0 10px;
+}
+
 :host-context(.responsive) {
   .spacer-responsive {
     flex: 1 0 auto;

diff --git a/projects/elements-demo/src/app/features/home/home/home.component.ts b/projects/elements-demo/src/app/features/home/home/home.component.ts
@@ -23,10 +23,24 @@ export class HomeComponent implements OnInit {
 
 const CODE_EXAMPLE_COMPONENT = `@Component({
   selector: 'your-org-feature',
-  template: '<some-element *axLazyElement="elementUrl"></some-element>'
+  template: \`
+    <!-- will be lazy loaded and uses standard Angular template bindings -->
+    <some-element
+      *axLazyElement="elementUrl"
+      [data]="data"
+      (dataChange)="handleChange($event)"
+    >
+    </some-element>
+  \`
 })
 export class FeatureComponent {
   elementUrl = 'https://your-org.com/elements/some-element.js';
+
+  data: SomeData;
+
+  handleChange(change: Partial<SomeData>) {
+    // ...
+  }
 }
 `;