feat(demo): add preview code + more examples. (#583)

.angular-cli.json

@@ -19,7 +19,7 @@
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "demo",
       "styles": [
-        "styles.css"
+        "styles.scss"
       ],
       "scripts": [],
       "environmentSource": "environments/environment.ts",
@@ -54,7 +54,7 @@
     }
   },
   "defaults": {
-    "styleExt": "css",
+    "styleExt": "scss",
     "class": {
       "spec": false
     },

demo/src/app/app.component.html

@@ -1,47 +1,20 @@
-<div class="container">
-    <h1>NG-formly example: Introduction</h1>
-    <p>This is a small subset of the things that formly can do :-) See the other examples and the documentation for more.</p>
-    <hr>
-    <form class="formly" role="form" novalidate [formGroup]="form" (ngSubmit)="submit(user)">
-        <formly-form [model]="user" [fields]="userFields" [form]="form" [options]="options">
-            <button type="submit" class="btn btn-primary">Submit</button>
-        </formly-form>
-    </form>
-    <hr>
-    <h3>Outside Formly</h3>
-    <input type="text" [ngModel]="user.email" (ngModelChange)="changeEmail($event)" class="form-control">
-    <label class="custom-control custom-checkbox">
-      <input type="checkbox" class="custom-control-input" [ngModel]="options.formState.readOnly" (ngModelChange)="toggleReadOnly($event)">
-        Read Only
-        <span class="custom-control-indicator"></span>
-    </label>
-    <br><strong>FORM DATA:</strong><br><pre>{{ user | json }}</pre><br>
-    <br><strong>FORM STATE:</strong><br><pre>{{ options.formState | json }}</pre><br>
-    <hr>
-    <button (click)="showEmail()" class="btn btn-success">Change Email</button>
-    <button (click)="resetForm()" class="btn btn-danger">Reset</button>
-    <button (click)="hide()" class="btn btn-info">Hide Expression Toggle</button>
-    <button (click)="options.resetModel()" class="btn btn-warning">Reset Model (Initial Values)</button>
-    <button (click)="options.resetModel({})" class="btn btn-warning">Reset Model (Empty Model)</button>
-    <button (click)="resetModelWithModel()" class="btn btn-warning">Reset Model (New Model)</button>
-    <button (click)="options.updateInitialValue()" class="btn btn-danger">Update Initial Values</button>
+<ngx-loading-bar></ngx-loading-bar>
+<mat-sidenav-container fullscreen>
+  <mat-toolbar color="primary">
+    <a mat-button routerLink="">
+      <img style="height: 26px; margin: 0 4px 3px 0;" src="https://material.angular.io/assets/img/homepage/angular-white-transparent.svg" alt="">
+      FORMLY
+    </a>
 
+    <a mat-button routerLink="examples">Examples</a>
 
-    <div style="margin-top:30px">
-        <small>
-            This is an example for the
-            <a href="https://formly-js.github.io/ng-formly">ng-formly</a>
-            project made with ♥ by
-            <strong>
-          <span *ngIf="!author.name || !author.url">
-            {{ vm.author.name || 'anonymous' }}
-          </span>
-                <a ng-if="vm.author.url" href="{{author.url}}">
-                    {{ author.name }}
-                </a>
-            </strong>
-            <br />
-            This example is running angular version "{{ env.angularVersion }}" and formly version "{{ env.formlyVersion }}"
-        </small>
-    </div>
-</div>
+    <span class="spacer" [style.flex]="'1 1 auto'"></span>
+
+    <a mat-button href="https://github.com/formly-js/ngx-formly">
+      <img style="height: 26px;" src="https://material.angular.io/assets/img/homepage/github-circle-white-transparent.svg" alt="">
+      GitHub
+    </a>
+  </mat-toolbar>
+
+  <router-outlet></router-outlet>
+</mat-sidenav-container>