docs(typehead): add demo for container (append to body) #3737 (#3741)

Add demo for input container which append typeahead to body Close #3737
valor-software · Feb 22, 2018 · 4592501 · 4592501
1 parent eea96c1
commit 4592501
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 1 deletion.
diff --git a/demo/src/app/components/+typeahead/demos/container/container.html b/demo/src/app/components/+typeahead/demos/container/container.html
@@ -0,0 +1,6 @@
+<pre class="card card-block card-header mb-3">Model: {{selected | json}}</pre>
+
+<input [(ngModel)]="selected"
+       [typeahead]="states"
+       container="body"
+       class="form-control">
diff --git a/demo/src/app/components/+typeahead/demos/container/container.ts b/demo/src/app/components/+typeahead/demos/container/container.ts
@@ -0,0 +1,61 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-typeahead-container',
+  templateUrl: './container.html'
+})
+export class DemoTypeaheadContainerComponent {
+  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 { DemoTypeaheadFormsComponent } from './in-form/in-form';
 import { DemoTypeaheadGroupingComponent } from './grouping/grouping';
 import { DemoTypeaheadDropupComponent } from './dropup/dropup';
 import { DemoTypeaheadScrollableComponent } from './scrollable/scrollable';
+import { DemoTypeaheadContainerComponent } from './container/container';
 import { DemoTypeaheadSingleWorldComponent } from './single-world/single-world';
 import { DemoTypeaheadPhraseDelimitersComponent } from './phrase-delimiters/phrase-delimiters';
 
@@ -19,7 +20,8 @@ export const DEMO_COMPONENTS = [
   DemoTypeaheadSingleWorldComponent,
   DemoTypeaheadPhraseDelimitersComponent,
   DemoTypeaheadDropupComponent,
-  DemoTypeaheadScrollableComponent
+  DemoTypeaheadScrollableComponent,
+  DemoTypeaheadContainerComponent
 ];
 
 export const DEMOS = {
@@ -51,6 +53,10 @@ export const DEMOS = {
     component: require('!!raw-loader?lang=typescript!./dropup/dropup.ts'),
     html: require('!!raw-loader?lang=markup!./dropup/dropup.html')
   },
+  container: {
+    component: require('!!raw-loader?lang=typescript!./container/container.ts'),
+    html: require('!!raw-loader?lang=markup!./container/container.html')
+  },
   scrollable: {
     component: require('!!raw-loader?lang=typescript!./scrollable/scrollable.ts'),
     html: require('!!raw-loader?lang=markup!./scrollable/scrollable.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 { DemoTypeaheadFormsComponent } from './demos/in-form/in-form';
 import { DemoTypeaheadGroupingComponent } from './demos/grouping/grouping';
 import { DemoTypeaheadDropupComponent } from './demos/dropup/dropup';
 import { DemoTypeaheadScrollableComponent } from './demos/scrollable/scrollable';
+import { DemoTypeaheadContainerComponent } from './demos/container/container';
 import { DemoTypeaheadSingleWorldComponent } from './demos/single-world/single-world';
 import { DemoTypeaheadPhraseDelimitersComponent } from './demos/phrase-delimiters/phrase-delimiters';
 
@@ -96,6 +97,16 @@ export const demoComponentContent: ContentSection[] = [
         html: require('!!raw-loader?lang=markup!./demos/dropup/dropup.html'),
         outlet: DemoTypeaheadDropupComponent
       },
+      {
+        title: 'Append to body',
+        anchor: 'container',
+        description: `
+        <p>A selector specifying the element the typeahead should be appended to. Currently only supports "body".</p>
+        `,
+        component: require('!!raw-loader?lang=typescript!./demos/container/container.ts'),
+        html: require('!!raw-loader?lang=markup!./demos/container/container.html'),
+        outlet: DemoTypeaheadContainerComponent
+      },
       {
         title: 'Scrollable',
         anchor: 'scrollable',