Feature/md-autocomplete

examples/all.ts

@@ -2,6 +2,7 @@
 
 
 import {CONST_EXPR, Type} from "angular2/src/facade/lang";
+import AutocompleteBasicUsage from "./components/autocomplete/basic_usage";
 import CardBasicUsage from "./components/card/basic_usage";
 import CardInlineActions from "./components/card/inline_actions";
 import ButtonBasicUsage from "./components/button/basic_usage";
@@ -29,6 +30,7 @@ import SidenavBasicUsage from "./components/sidenav/basic_usage";
  * Collection of Material Design component example directives.
  */
 export const DEMO_DIRECTIVES: Type[] = CONST_EXPR([
+  AutocompleteBasicUsage,
   CardBasicUsage, CardInlineActions, CardActionButtons,
   ButtonBasicUsage,
   CheckboxBasicUsage, CheckboxSyncing,

examples/components/autocomplete/basic_usage.html

@@ -0,0 +1,12 @@
+<div layout="column" class="md-inline-form">
+    <md-content>
+        <md-subheader>Type into the below area</md-subheader>
+        <md-divider></md-divider>
+        <section layout-padding style="padding-bottom: 400px;">
+            <md-autocomplete-container class="md-block" flex-gt-sm>
+                <label>Countries</label>
+                <input md-input [(value)]="test">
+            </md-autocomplete-container>
+        </section>
+    </md-content>
+</div>

examples/components/autocomplete/basic_usage.ts

@@ -0,0 +1,21 @@
+import {Component} from "angular2/core";
+import {MATERIAL_DIRECTIVES} from "ng2-material/all";
+import {FORM_DIRECTIVES} from "angular2/common";
+
+
+@Component({
+    selector: 'autocomplete-basic-usage',
+    templateUrl: 'examples/components/autocomplete/basic_usage.html',
+    directives: [MATERIAL_DIRECTIVES, FORM_DIRECTIVES]
+})
+export default class AutocompleteBasicUsage {
+
+  countries: Array<string> = ["Albania","Andorra","Armenia","Austria","Azerbaijan","Belarus","Belgium","Bosnia & Herzegovina",
+    "Bulgaria","Croatia","Cyprus","Czech Republic","Denmark","Estonia","Finland","France","Georgia",
+    "Germany","Greece","Hungary","Iceland","Ireland","Italy","Kosovo","Latvia","Liechtenstein",
+    "Lithuania","Luxembourg","Macedonia","Malta","Moldova","Monaco","Montenegro","Netherlands",
+    "Norway","Poland","Portugal","Romania","Russia","San Marino","Serbia","Slovakia",
+    "Slovenia","Spain","Sweden","Switzerland","Turkey","Ukraine","United Kingdom","Vatican City"];
+
+
+}

ng2-material/all.ts

@@ -1,4 +1,5 @@
 import {CONST_EXPR, Type} from "angular2/src/facade/lang";
+import {MdAutocompleteContainer} from "./components/autocomplete/autocomplete";
 import {MdAnchor, MdButton} from "./components/button/button";
 import {MdCheckbox} from "./components/checkbox/checkbox";
 import {MdContent} from "./components/content/content";
@@ -30,6 +31,9 @@ import {SidenavService} from "./components/sidenav/sidenav_service";
 import {MdToolbar} from "./components/toolbar/toolbar";
 import {MdTabs, MdTab} from "./components/tabs/tabs";
 import {Media} from "./core/util/media";
+
+export * from './components/autocomplete/autocomplete';
+
 export * from './components/button/button';
 
 export * from './components/checkbox/checkbox';
@@ -83,6 +87,7 @@ export * from './core/util/animate';
  * Collection of Material Design component directives.
  */
 export const MATERIAL_DIRECTIVES: Type[] = CONST_EXPR([
+  MdAutocompleteContainer,
   MdAnchor, MdButton,
   MdCheckbox,
   MdContent,

ng2-material/components.scss

@@ -1,3 +1,4 @@
+@import "components/autocomplete/autocomplete";
 @import "components/backdrop/backdrop";
 @import "components/button/button";
 @import "components/card/card";