(demo) Update demo for template

Greentube · Dec 21, 2017 · 693761e · 693761e
1 parent 7f1d24e
commit 693761e
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 36 deletions.
diff --git a/demo/package.json b/demo/package.json
@@ -21,7 +21,7 @@
     "@angular/platform-browser": "^5.0.0",
     "@angular/platform-browser-dynamic": "^5.0.0",
     "@angular/router": "^5.0.0",
-    "ngx-type-ahead": "^1.0.1",
+    "ngx-type-ahead": "^1.0.5",
     "bootstrap": "^4.0.0-beta.2",
     "core-js": "^2.4.1",
     "rxjs": "^5.5.2",

diff --git a/demo/src/app/app.component.html b/demo/src/app/app.component.html
@@ -8,50 +8,94 @@
     </p>
     <form [formGroup]="myForm">
       <div class="row">
-        <div class="col-6">
+        <div class="col-xl-6 col-md-12">
           <h6>Single, custom</h6>
-          <type-ahead formControlName="hobbySingleCustom" [suggestions]="hobbies$"
-                     class="form-control" [custom]="true"></type-ahead>
-          <type-ahead formControlName="hobbySingleCustomSet" [suggestions]="hobbies$"
-                     class="form-control" [custom]="true"></type-ahead>
-
+          <div class="row">
+            <div class="col-6">
+              <type-ahead formControlName="hobbySingleCustom" [suggestions]="hobbies$"
+                          class="form-control" [custom]="true"></type-ahead>
+            </div>
+            <div class="col-6">
+              <type-ahead formControlName="hobbySingleCustomSet" [suggestions]="hobbies$"
+                          class="form-control" [custom]="true"></type-ahead>
+            </div>
+          </div>
           <h6>Single, fixed</h6>
-          <type-ahead formControlName="hobbySingleFixed" [suggestions]="hobbies"
-                     class="form-control" [custom]="false"></type-ahead>
-          <type-ahead formControlName="hobbySingleFixedSet" [suggestions]="hobbies"
-                     class="form-control" [custom]="false"></type-ahead>
-
+          <div class="row">
+            <div class="col-6">
+              <type-ahead formControlName="hobbySingleFixed" [suggestions]="hobbies"
+                          class="form-control" [custom]="false"></type-ahead>
+            </div>
+            <div class="col-6">
+              <type-ahead formControlName="hobbySingleFixedSet" [suggestions]="hobbies"
+                          class="form-control" [custom]="false"></type-ahead>
+            </div>
+          </div>
           <h6>Multi, custom</h6>
-          <type-ahead formControlName="hobbyMultiCustom" [suggestions]="hobbies"
-                     class="form-control" [custom]="true" [multi]="true"></type-ahead>
-          <type-ahead formControlName="hobbyMultiCustomSet" [suggestions]="hobbies"
-                     class="form-control" [custom]="true" [multi]="true"></type-ahead>
-
+          <div class="row">
+            <div class="col-6">
+              <type-ahead formControlName="hobbyMultiCustom" [suggestions]="hobbies"
+                          class="form-control" [custom]="true" [multi]="true"></type-ahead>
+            </div>
+            <div class="col-6">
+              <type-ahead formControlName="hobbyMultiCustomSet" [suggestions]="hobbies"
+                          class="form-control" [custom]="true" [multi]="true"></type-ahead>
+            </div>
+          </div>
           <h6>Multi, fixed</h6>
-          <type-ahead formControlName="hobbyMultiFixed" [suggestions]="hobbies"
-                     class="form-control" [custom]="false" [multi]="true"></type-ahead>
-          <type-ahead formControlName="hobbyMultiFixedSet" [suggestions]="hobbies"
-                     class="form-control" [custom]="false" [multi]="true"></type-ahead>
+          <div class="row">
+            <div class="col-6">
+              <type-ahead formControlName="hobbyMultiFixed" [suggestions]="hobbies"
+                          class="form-control" [custom]="false" [multi]="true"></type-ahead>
+            </div>
+            <div class="col-6">
+              <type-ahead formControlName="hobbyMultiFixedSet" [suggestions]="hobbies"
+                          class="form-control" [custom]="false" [multi]="true"></type-ahead>
+            </div>
+          </div>
 
           <h6>Single, complex object</h6>
-          <type-ahead formControlName="countrySingle" [suggestions]="countries"
-                     class="form-control" idField="code" [complex]="true"></type-ahead>
-          <type-ahead formControlName="countrySingleSet" [suggestions]="countries"
-                     class="form-control" idField="code" [complex]="true"></type-ahead>
+          <div class="row">
+            <div class="col-6">
+              <type-ahead formControlName="countrySingle" [suggestions]="countries"
+                          class="form-control" idField="code" [complex]="true"></type-ahead>
+            </div>
+            <div class="col-6">
+              <type-ahead formControlName="countrySingleSet" [suggestions]="countries"
+                          class="form-control" idField="code" [complex]="true"></type-ahead>
+            </div>
+          </div>
 
-          <h6>Multi, complex object</h6>
-          <type-ahead formControlName="countryMulti" [suggestions]="countries$" [settings]="customSettings"
-                      class="form-control" idField="code" [multi]="true" [complex]="true"></type-ahead>
-          <type-ahead formControlName="countryMultiSet" [suggestions]="countries$" [settings]="customSettings"
-                      class="form-control" idField="code" [multi]="true" [complex]="true"></type-ahead>
+          <h6>Multi, complex object with template</h6>
+          <div class="row">
+            <div class="col-6">
+              <type-ahead formControlName="countryMulti" [suggestions]="countries$" [settings]="customSettings"
+                          class="form-control" idField="code" [multi]="true" [complex]="true"
+                          [itemTemplate]="countryTemplate"></type-ahead>
+            </div>
+            <div class="col-6">
+              <type-ahead formControlName="countryMultiSet" [suggestions]="countries$" [settings]="customSettings"
+                          class="form-control" idField="code" [multi]="true" [complex]="true"
+                          [itemTemplate]="countryTemplate"></type-ahead>
+            </div>
+            <ng-template #countryTemplate let-item="item">
+              {{item.name}} ({{item.code}})
+            </ng-template>
+          </div>
 
           <h6>Multi, complex with Http call</h6>
-          <type-ahead formControlName="planet" [suggestions]="planets$" [settings]="customSettings"
-                      class="form-control" idField="url" [multi]="true" [complex]="true"></type-ahead>
-          <type-ahead formControlName="planetSet" [suggestions]="planets$" [settings]="customSettings"
-                      class="form-control" idField="url" [multi]="true" [complex]="true"></type-ahead>
+          <div class="row">
+            <div class="col-6">
+              <type-ahead formControlName="planet" [suggestions]="planets$" [settings]="customSettings"
+                          class="form-control" idField="url" [multi]="true" [complex]="true"></type-ahead>
+            </div>
+            <div class="col-6">
+              <type-ahead formControlName="planetSet" [suggestions]="planets$" [settings]="customSettings"
+                          class="form-control" idField="url" [multi]="true" [complex]="true"></type-ahead>
+            </div>
+          </div>
         </div>
-        <div class="col-6">
+        <div class="col-xl-6 col-md-12">
           <fieldset>
             <legend>Value:</legend>
             <pre>{{ myForm.value | json:2 }}</pre>

diff --git a/demo/src/app/app.component.ts b/demo/src/app/app.component.ts
@@ -53,7 +53,7 @@ export class AppComponent implements OnInit {
       hobbyMultiFixed: [],
       countrySingle: null,
       countryMulti: [],
-      planet: [],
+      planet: [['https://swapi.co/api/planets/4/', 'https://swapi.co/api/planets/2/', 'https://swapi.co/api/planets/3/']],
       hobbySingleCustomSet: { value: 'Abcd', disabled: true },
       hobbySingleFixedSet: { value: this.hobbies[0], disabled: true },
       hobbyMultiCustomSet: { value: ['Abcd'], disabled: true },