docs(typehead): add demo for typeaheadWaitMs #3659 (#3661)

Add demo for typeaheadWaitMs Close #3659
valor-software · Mar 1, 2018 · 4b4e519 · 4b4e519
1 parent 1a05783
commit 4b4e519
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 3 deletions.
diff --git a/demo/src/app/components/+typeahead/demos/delay/delay.html b/demo/src/app/components/+typeahead/demos/delay/delay.html
@@ -0,0 +1,5 @@
+<pre class="card card-block card-header">Model: {{selected | json}}</pre>
+<input [(ngModel)]="selected"
+       [typeahead]="states"
+       typeaheadWaitMs="1000"
+       class="form-control">
diff --git a/demo/src/app/components/+typeahead/demos/delay/delay.ts b/demo/src/app/components/+typeahead/demos/delay/delay.ts
@@ -0,0 +1,61 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-typeahead-delay',
+  templateUrl: './delay.html'
+})
+export class DemoTypeaheadDelayComponent {
+  selected: string;
+  states: string[] = [
+    'Alabama',
+    'Alaska',
+    'Arizona',
+    'Arkansas',
+    'California',
+    'Colorado',
+    'Connecticut',
+    'Delaware',
+    'Florida',
+    'Georgia',
+    'Hawaii',
+    'Idaho',
+    'Illinois',
+    'Indiana',
+    'Iowa',
+    'Kansas',
+    'Kentucky',
+    'Louisiana',
+    'Maine',
+    'Maryland',
+    'Massachusetts',
+    'Michigan',
+    'Minnesota',
+    'Mississippi',
+    'Missouri',
+    'Montana',
+    'Nebraska',
+    'Nevada',
+    'New Hampshire',
+    'New Jersey',
+    'New Mexico',
+    'New York',
+    'North Dakota',
+    'North Carolina',
+    'Ohio',
+    'Oklahoma',
+    'Oregon',
+    'Pennsylvania',
+    'Rhode Island',
+    'South Carolina',
+    'South Dakota',
+    'Tennessee',
+    'Texas',
+    'Utah',
+    'Vermont',
+    'Virginia',
+    'Washington',
+    'West Virginia',
+    'Wisconsin',
+    'Wyoming'
+  ];
+}
diff --git a/demo/src/app/components/+typeahead/demos/index.ts b/demo/src/app/components/+typeahead/demos/index.ts
@@ -6,6 +6,7 @@ import { DemoTypeaheadReactiveFormComponent } from './reactive-form/reactive-for
 import { DemoTypeaheadGroupingComponent } from './grouping/grouping';
 import { DemoTypeaheadDropupComponent } from './dropup/dropup';
 import { DemoTypeaheadScrollableComponent } from './scrollable/scrollable';
+import { DemoTypeaheadDelayComponent } from './delay/delay';
 import { DemoTypeaheadLatinizeComponent } from './latinize/latinize';
 import { DemoTypeaheadNoResultComponent } from './no-result/no-result';
 import { DemoTypeaheadOnBlurComponent } from './on-blur/on-blur';
@@ -26,6 +27,7 @@ export const DEMO_COMPONENTS = [
   DemoTypeaheadPhraseDelimitersComponent,
   DemoTypeaheadDropupComponent,
   DemoTypeaheadScrollableComponent,
+  DemoTypeaheadDelayComponent,
   DemoTypeaheadNoResultComponent,
   DemoTypeaheadOnBlurComponent,
   DemoTypeaheadLatinizeComponent,
@@ -51,6 +53,10 @@ export const DEMOS = {
     component: require('!!raw-loader?lang=typescript!./async/async.ts'),
     html: require('!!raw-loader?lang=markup!./async/async.html')
   },
+  delay: {
+    component: require('!!raw-loader?lang=typescript!./delay/delay.ts'),
+    html: require('!!raw-loader?lang=markup!./delay/delay.html')
+  },
   latinize: {
     component: require('!!raw-loader?lang=typescript!./latinize/latinize.ts'),
     html: require('!!raw-loader?lang=markup!./latinize/latinize.html')

diff --git a/demo/src/app/components/+typeahead/typeahead-section.list.ts b/demo/src/app/components/+typeahead/typeahead-section.list.ts
@@ -6,6 +6,7 @@ import { DemoTypeaheadReactiveFormComponent } from './demos/reactive-form/reacti
 import { DemoTypeaheadGroupingComponent } from './demos/grouping/grouping';
 import { DemoTypeaheadDropupComponent } from './demos/dropup/dropup';
 import { DemoTypeaheadScrollableComponent } from './demos/scrollable/scrollable';
+import { DemoTypeaheadDelayComponent } from './demos/delay/delay';
 import { DemoTypeaheadLatinizeComponent } from './demos/latinize/latinize';
 import { DemoTypeaheadNoResultComponent } from './demos/no-result/no-result';
 import { DemoTypeaheadOnBlurComponent } from './demos/on-blur/on-blur';
@@ -16,9 +17,9 @@ import { DemoTypeaheadPhraseDelimitersComponent } from './demos/phrase-delimiter
 import { DemoTypeaheadOnSelectComponent } from './demos/on-select/on-select';
 
 import { ContentSection } from '../../docs/models/content-section.model';
-import { DemoTopSectionComponent } from '../../docs/demo-section-components/demo-top-section/index';
-import { ExamplesComponent } from '../../docs/demo-section-components/demo-examples-section/index';
-import { ApiSectionsComponent } from '../../docs/demo-section-components/demo-api-section/index';
+import { DemoTopSectionComponent } from '../../docs/demo-section-components/demo-top-section';
+import { ExamplesComponent } from '../../docs/demo-section-components/demo-examples-section';
+import { ApiSectionsComponent } from '../../docs/demo-section-components/demo-api-section';
 
 import { NgApiDocComponent } from '../../docs/api-docs';
 
@@ -64,6 +65,17 @@ export const demoComponentContent: ContentSection[] = [
         html: require('!!raw-loader?lang=markup!./demos/async/async.html'),
         outlet: DemoTypeaheadAsyncComponent
       },
+      {
+        title: 'With delay',
+        anchor: 'delay',
+        description: `
+          <p>Use to set minimal waiting time after last character typed before typeahead kicks-in.
+          In example a search begins with delay in 1 second</p>
+        `,
+        component: require('!!raw-loader?lang=typescript!./demos/delay/delay.ts'),
+        html: require('!!raw-loader?lang=markup!./demos/delay/delay.html'),
+        outlet: DemoTypeaheadDelayComponent
+      },
       {
         title: 'Template-driven forms',
         anchor: 'forms',