feat(demo): improved the demo app + added ability to customize the component

Author: AnthonyNahas

angular.json

@@ -29,9 +29,13 @@
             ],
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
-              "src/styles.scss"
+              "src/styles.scss",
+              "./node_modules/prismjs/themes/prism-okaidia.css"
             ],
-            "scripts": []
+            "scripts": [
+              "./node_modules/prismjs/prism.js",
+              "./node_modules/prismjs/components/prism-typescript.min.js"
+            ]
           },
           "configurations": {
             "production": {
@@ -222,4 +226,4 @@
   "cli": {
     "analytics": "7d642609-882d-4ec8-8f86-9bddc376febc"
   }
-}
+}

package-lock.json

@@ -35,6 +35,7 @@
     "@nguniversal/express-engine": "^9.1.1",
     "angulartics2": "^9.1.0",
     "express": "^4.15.2",
+    "ngx-markdown": "^9.1.1",
     "rxjs": "~6.5.4",
     "tslib": "^1.10.0",
     "zone.js": "~0.10.2"

package.json

@@ -194,7 +194,7 @@
   }
 
   .terminal pre {
-    font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
+    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
     color: white;
     padding: 0 1rem 1rem;
     margin: 0;
@@ -238,17 +238,17 @@
     align-items: center;
     font-size: 12px;
     padding: 3px 10px;
-    border: 1px solid rgba(27,31,35,.2);
+    border: 1px solid rgba(27, 31, 35, .2);
     border-radius: 3px;
-    background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
+    background-image: linear-gradient(-180deg, #fafbfc, #eff3f6 90%);
     margin-left: 4px;
     font-weight: 600;
-    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
+    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   }
 
   .github-star-badge:hover {
-    background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
-    border-color: rgba(27,31,35,.35);
+    background-image: linear-gradient(-180deg, #f0f3f6, #e6ebf1 90%);
+    border-color: rgba(27, 31, 35, .35);
     background-position: -.5em;
   }
 
@@ -270,7 +270,7 @@
   /* Responsive Styles */
   @media screen and (max-width: 767px) {
 
-    .card-container > *:not(.circle-link) ,
+    .card-container > *:not(.circle-link),
     .terminal {
       width: 100%;
     }
@@ -428,9 +428,30 @@ <h2>Install</h2>
   </div>
 
   <!-- Usage -->
-  <h2>Usage</h2>
-
-  <mat-input-counter [min]="0"></mat-input-counter>
+  <h2 style="margin-top: 2rem">Usage</h2>
+
+  <mat-toolbar color="primary">
+    Usage
+    <span fxFlex></span>
+    <button mat-icon-button matTooltip="customize" (click)="openCustomizeDialog()">
+      <mat-icon>edit</mat-icon>
+    </button>
+  </mat-toolbar>
+  <mat-card>
+    <mat-card-content>
+      <form [formGroup]="formGroup">
+        <mat-input-counter formControlName="inputCounter"
+                           [min]="+options.min"
+                           [max]="+options.max"
+                           [step]="+options.step"
+                           [label]="options.label"
+                           [placeholder]="options.placeholder">
+        </mat-input-counter>
+      </form>
+    </mat-card-content>
+  </mat-card>
+
+  <markdown src="assets/md/ex1.md"></markdown>
 
   <!-- Next Steps -->
   <h2 style="margin-top: 4rem">Next Steps</h2>
@@ -605,5 +626,4 @@ <h2 style="margin-top: 4rem">Next Steps</h2>
 <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
 
 
-
 <router-outlet></router-outlet>

src/app/app.component.html

@@ -0,0 +1,4 @@
+.mat-card{
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}

src/app/app.component.scss

@@ -1,10 +1,37 @@
-import { Component } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
+import {MatDialog} from '@angular/material/dialog';
+import {CustomizeDialogComponent, InputCounterOptions} from './dialogs/customize-dialog/customize-dialog.component';
+import {FormControl, FormGroup} from '@angular/forms';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
+
+  formGroup: FormGroup;
+
   title = 'input-counter';
+  options: InputCounterOptions = {min: 0, max: 10, step: 1};
+
+  constructor(private dialog: MatDialog) {
+  }
+
+  openCustomizeDialog() {
+    this.dialog.open(CustomizeDialogComponent, {data: this.options}).afterClosed().subscribe(data => {
+      if (data) {
+        this.options = Object.assign(this.options, data);
+      }
+    });
+  }
+
+  ngOnInit(): void {
+    this.formGroup = new FormGroup({
+      inputCounter: new FormControl()
+    });
+
+    this.formGroup.get('inputCounter').valueChanges.subscribe(value => console.log('inout counter value: ', value));
+  }
+
 }

src/app/app.component.ts

@@ -5,16 +5,42 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import {MatInputCounterModule} from '@angular-material-extensions/input-counter';
+import {MatToolbarModule} from '@angular/material/toolbar';
+import {FlexModule} from '@angular/flex-layout';
+import {MatCardModule} from '@angular/material/card';
+import {MatIconModule} from '@angular/material/icon';
+import {MatButtonModule} from '@angular/material/button';
+import {MatTooltipModule} from '@angular/material/tooltip';
+import { CustomizeDialogComponent } from './dialogs/customize-dialog/customize-dialog.component';
+import {MatDialogModule} from '@angular/material/dialog';
+import {MatInputModule} from '@angular/material/input';
+import {ReactiveFormsModule} from '@angular/forms';
+import {Angulartics2Module} from 'angulartics2';
+import {MarkdownModule} from 'ngx-markdown';
+import {HttpClientModule} from '@angular/common/http';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    CustomizeDialogComponent
   ],
   imports: [
-    BrowserModule.withServerTransition({ appId: 'serverApp' }),
+    BrowserModule.withServerTransition({appId: 'serverApp'}),
+    Angulartics2Module.forRoot(),
+    MarkdownModule.forRoot(),
+    HttpClientModule,
     AppRoutingModule,
     BrowserAnimationsModule,
-    MatInputCounterModule
+    MatInputCounterModule,
+    MatToolbarModule,
+    FlexModule,
+    MatCardModule,
+    MatIconModule,
+    MatButtonModule,
+    MatTooltipModule,
+    MatDialogModule,
+    MatInputModule,
+    ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]