docs(autocomplete): add autocomplete example (#101)

Author: kara

src/app/examples/autocomplete-overview/autocomplete-overview-example.css

@@ -0,0 +1,9 @@
+<md-input-container>
+  <input mdInput placeholder="State" [mdAutocomplete]="auto" [formControl]="stateCtrl">
+</md-input-container>
+
+<md-autocomplete #auto="mdAutocomplete">
+  <md-option *ngFor="let state of filteredStates | async" [value]="state">
+    {{ state }}
+  </md-option>
+</md-autocomplete>

src/app/examples/autocomplete-overview/autocomplete-overview-example.html

@@ -0,0 +1,77 @@
+import {Component} from '@angular/core';
+import {FormControl} from '@angular/forms';
+import 'rxjs/add/operator/startWith';
+
+@Component({
+  selector: 'autocomplete-overview-example',
+  templateUrl: './autocomplete-overview-example.html',
+})
+export class AutocompleteOverviewExample {
+  stateCtrl: FormControl;
+  filteredStates: any;
+
+  states = [
+    '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 Carolina',
+    'North Dakota',
+    'Ohio',
+    'Oklahoma',
+    'Oregon',
+    'Pennsylvania',
+    'Rhode Island',
+    'South Carolina',
+    'South Dakota',
+    'Tennessee',
+    'Texas',
+    'Utah',
+    'Vermont',
+    'Virginia',
+    'Washington',
+    'West Virginia',
+    'Wisconsin',
+    'Wyoming',
+  ];
+
+  constructor() {
+    this.stateCtrl = new FormControl();
+    this.filteredStates = this.stateCtrl.valueChanges
+        .startWith(null)
+        .map(name => this.filterStates(name));
+  }
+
+  filterStates(val: string) {
+    return val ? this.states.filter((s) => new RegExp(val, 'gi').test(s)) : this.states;
+  }
+
+}

src/app/examples/autocomplete-overview/autocomplete-overview-example.ts

@@ -1,5 +1,5 @@
 import {NgModule} from '@angular/core';
-import {FormsModule} from '@angular/forms';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {CommonModule} from '@angular/common';
 import {MaterialModule} from '@angular/material';
 import {ButtonOverviewExample} from './button-overview/button-overview-example';
@@ -62,6 +62,7 @@ import {TabsTemplateLabelExample} from './tabs-template-label/tabs-template-labe
 import {RadioOverviewExample} from './radio-overview/radio-overview-example';
 import {SidenavOverviewExample} from './sidenav-overview/sidenav-overview-example';
 import {SelectOverviewExample} from './select-overview/select-overview-example';
+import {AutocompleteOverviewExample} from './autocomplete-overview/autocomplete-overview-example';
 import {ChipsOverviewExample} from './chips-overview/chips-overview-example';
 import {ChipsStackedExample} from './chips-stacked/chips-stacked-example';
 import {SelectFormExample} from './select-form/select-form-example';
@@ -80,6 +81,7 @@ export interface LiveExample {
  * Value is the component.
  */
 export const EXAMPLE_COMPONENTS = {
+  'autocomplete-overview': {title: 'Basic autocomplete', component: AutocompleteOverviewExample},
   'button-overview': {title: 'Basic buttons', component: ButtonOverviewExample},
   'button-types': {title: 'Button varieties', component: ButtonTypesExample},
   'button-toggle-exclusive': {
@@ -159,6 +161,7 @@ export const EXAMPLE_COMPONENTS = {
  * We need to put them in both `declarations` and `entryComponents` to make them work.
  */
 export const EXAMPLE_LIST = [
+  AutocompleteOverviewExample,
   ButtonOverviewExample,
   ButtonToggleExclusiveExample,
   ButtonToggleOverviewExample,
@@ -214,6 +217,7 @@ export const EXAMPLE_LIST = [
   imports: [
     MaterialModule,
     FormsModule,
+    ReactiveFormsModule,
     CommonModule,
   ]
 })

src/app/examples/example-module.ts

@@ -18,6 +18,7 @@ const DOCS = [
     name: 'Form Controls',
     summary: 'Radio buttons, checkboxes, input fields, sliders, slide toggles, selects',
     items: [
+      {id: 'autocomplete', name: 'Autocomplete', examples: ['autocomplete-overview']},
       {id: 'checkbox', name: 'Checkbox', examples: ['checkbox-configurable']},
       {id: 'input', name: 'Input', examples: ['input-form']},
       {id: 'radio', name: 'Radio button', examples: ['radio-ng-model']},

src/app/shared/documentation-items/documentation-items.ts

@@ -1,7 +1,7 @@
 import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 import {BrowserModule} from '@angular/platform-browser';
 import {NgModule} from '@angular/core';
-import {FormsModule} from '@angular/forms';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MaterialModule} from '@angular/material';
 import {MaterialDocsExample} from './material-docs-example';
 
@@ -10,7 +10,8 @@ import {MaterialDocsExample} from './material-docs-example';
   imports: [
     BrowserModule,
     FormsModule,
-    MaterialModule.forRoot(),
+    ReactiveFormsModule,
+    MaterialModule,
   ],
 
   declarations: [MaterialDocsExample],