add async example

Author: Ales Rechtorik

src/demo-app/select/select-demo.html

@@ -57,6 +57,36 @@
     </md-select>
   </md-card>
 
+  <md-card *ngIf="selectHeaderAsyncControl">
+    <h3>md-select-header with async search</h3>
+    <md-select placeholder="Users" [formControl]="selectHeaderAsyncControl.get('selected')">
+      <md-select-header #selectAsyncHeader>
+        <input
+          type="search"
+          [formControl]="selectHeaderAsyncControl.get('search')"
+          [attr.aria-owns]="selectAsyncHeader.panelId"
+          placeholder="Search for a github User"
+        />
+      </md-select-header>
+
+      <md-option *ngFor="let user of users$ | async" [value]="user">
+        <img
+          class="async-select-avatar  mat-elevation-z2"
+          [src]="user.avatar_url"
+          [alt]="user.login"
+        />
+        {{ user.login }}
+      </md-option>
+
+    </md-select>
+
+    <div *ngIf="selectHeaderAsyncControl.get('selected').value">
+      <h5>selected user:</h5>
+      <pre><code>{{ selectHeaderAsyncControl.get('selected').value | json }}</code></pre>
+    </div>
+
+  </md-card>
+
 
 </div>
 <div style="height: 500px">This div is for testing scrolled selects.</div>

src/demo-app/select/select-demo.scss

@@ -7,4 +7,21 @@
     margin: 24px;
   }
 
-}
+}
+
+.async-select-avatar {
+  display: inline-block;
+  vertical-align: middle;
+  width: 30px;
+  height: 30px;
+  margin-right: 10px;
+  border-radius: 100%;
+}
+
+pre {
+  white-space: pre-wrap;
+  font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console",
+"Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
+"Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
+
+}

src/demo-app/select/select-demo.ts

@@ -1,6 +1,14 @@
 import {Component} from '@angular/core';
-import {FormControl} from '@angular/forms';
+import {FormControl, FormGroup} from '@angular/forms';
 import {MdSelectChange} from '@angular/material';
+import {Http} from '@angular/http';
+
+import 'rxjs/add/operator/debounce';
+import 'rxjs/add/operator/withLatestFrom';
+import 'rxjs/add/observable/timer';
+import {Observable} from 'rxjs/Observable';
+
+const GITHUB_API_ENDPOINT = 'https://api.github.com';
 
 @Component({
     moduleId: module.id,
@@ -17,6 +25,29 @@ export class SelectDemo {
   latestChangeEvent: MdSelectChange;
   foodControl = new FormControl('pizza-1');
 
+  selectHeaderAsyncControl = new FormGroup({
+    search: new FormControl(),
+    selected: new FormControl({})
+  });
+
+  users$ = this.selectHeaderAsyncControl
+        .get('search')
+        .valueChanges
+        .startWith(null)
+        .debounce(() => Observable.timer(200))
+        .switchMap((term) => {
+          if (term) {
+            return this._http
+              .get(`${GITHUB_API_ENDPOINT}/search/users?q=${term}`)
+              .map((response) => response.json())
+              .map((data) => data.items);
+          } else {
+            return this._http
+              .get(`${GITHUB_API_ENDPOINT}/users`)
+              .map((response) => response.json());
+          }
+        });
+
   foods = [
     {value: 'steak-0', viewValue: 'Steak'},
     {value: 'pizza-1', viewValue: 'Pizza'},
@@ -43,6 +74,8 @@ export class SelectDemo {
     {value: 'squirtle-2', viewValue: 'Squirtle'}
   ];
 
+  constructor(private _http: Http) { }
+
   toggleDisabled() {
     this.foodControl.enabled ? this.foodControl.disable() : this.foodControl.enable();
   }