feat(demo): improve dynamic example docs

angular-extensions · Sep 28, 2019 · 49e211f · 49e211f
1 parent c23b904
commit 49e211f
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 3 deletions.
diff --git a/projects/elements-demo/src/app/features/examples/dynamic/dynamic.component.html b/projects/elements-demo/src/app/features/examples/dynamic/dynamic.component.html
@@ -26,12 +26,18 @@ <h2>Dynamic element tag</h2>
           loadingTemplate: loading;
           module: true
         "
-        [outlined]="true"
+        [outlined]="buttonTypeIsOutlined"
+        [raised]="!buttonTypeIsOutlined"
         (click)="increment1()"
       >
         Increment
       </ax-lazy-element>
       <p>Counter: {{ counter1 }}</p>
+      <div class="controls">
+        <span>Raised button</span>
+        <mat-slide-toggle [(ngModel)]="buttonTypeIsOutlined"></mat-slide-toggle>
+        <span>Outline button</span>
+      </div>
     </div>
     <div class="description">
       <p>

diff --git a/projects/elements-demo/src/app/features/examples/dynamic/dynamic.component.scss b/projects/elements-demo/src/app/features/examples/dynamic/dynamic.component.scss
@@ -29,6 +29,15 @@
     .description {
       flex: 1.5;
     }
+
+    .controls {
+      display: flex;
+      align-items: center;
+
+      span {
+        padding: 20px;
+      }
+    }
   }
 }
 

diff --git a/projects/elements-demo/src/app/features/examples/dynamic/dynamic.component.ts b/projects/elements-demo/src/app/features/examples/dynamic/dynamic.component.ts
@@ -16,6 +16,7 @@ export class DynamicComponent implements OnInit {
   codeExample2html = CODE_EXAMPLE_2_HTML;
 
   // example state
+  buttonTypeIsOutlined = true;
   counter1 = 0;
   counter2 = 0;
 

diff --git a/projects/elements-demo/src/app/features/examples/dynamic/dynamic.module.ts b/projects/elements-demo/src/app/features/examples/dynamic/dynamic.module.ts
@@ -1,5 +1,6 @@
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { HighlightModule } from 'ngx-highlightjs';
+import { FormsModule } from '@angular/forms';
 
 import {
   LazyElementModuleOptions,
@@ -26,6 +27,7 @@ const options: LazyElementModuleOptions = {
   declarations: [DynamicComponent],
   imports: [
     HighlightModule,
+    FormsModule,
     LazyElementsModule.forFeature(options),
     SharedModule,
     DynamicRoutingModule

diff --git a/projects/elements-demo/src/app/shared/shared.module.ts b/projects/elements-demo/src/app/shared/shared.module.ts
@@ -14,7 +14,8 @@ import {
   MatExpansionModule,
   MatSnackBarModule,
   MatSliderModule,
-  MatFormFieldModule
+  MatFormFieldModule,
+  MatSlideToggleModule
 } from '@angular/material';
 import { SpinnerComponent } from './spinner/spinner.component';
 import { ErrorComponent } from './error/error.component';
@@ -32,7 +33,8 @@ const ANGULAR_MATERIAL_MODULES = [
   MatExpansionModule,
   MatSnackBarModule,
   MatSliderModule,
-  MatFormFieldModule
+  MatFormFieldModule,
+  MatSlideToggleModule
 ];
 
 @NgModule({