| 
									
										
										
										
											2016-02-02 02:27:52 -08:00
										 |  |  | // #docregion
 | 
					
						
							| 
									
										
										
										
											2016-02-02 11:22:48 -08:00
										 |  |  | import {Component}        from 'angular2/core'; | 
					
						
							|  |  |  | import {JSONP_PROVIDERS}  from 'angular2/http'; | 
					
						
							|  |  |  | import {Observable}       from 'rxjs/Observable'; | 
					
						
							| 
									
										
										
										
											2016-02-03 22:28:39 -08:00
										 |  |  | // #docregion import-subject
 | 
					
						
							|  |  |  | import {Subject}          from 'rxjs/Subject'; | 
					
						
							|  |  |  | // #enddocregion import-subject
 | 
					
						
							| 
									
										
										
										
											2016-02-02 11:22:48 -08:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2016-02-02 02:27:52 -08:00
										 |  |  | import {WikipediaService} from './wikipedia.service'; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | @Component({ | 
					
						
							|  |  |  |   selector: 'my-wiki-smart', | 
					
						
							|  |  |  |   template: `
 | 
					
						
							|  |  |  |     <h1>Smarter Wikipedia Demo</h1> | 
					
						
							|  |  |  |     <p><i>Fetches when typing stops</i></p> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     <input #term (keyup)="search(term.value)"/> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     <ul> | 
					
						
							|  |  |  |       <li *ngFor="#item of items | async">{{item}}</li> | 
					
						
							|  |  |  |     </ul> | 
					
						
							|  |  |  |   `,
 | 
					
						
							|  |  |  |   providers:[JSONP_PROVIDERS, WikipediaService] | 
					
						
							|  |  |  | }) | 
					
						
							|  |  |  | export class WikiSmartComponent { | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   constructor (private _wikipediaService: WikipediaService) { } | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2016-02-03 22:28:39 -08:00
										 |  |  |   // #docregion subject
 | 
					
						
							|  |  |  |   private _searchTermStream = new Subject<string>(); | 
					
						
							| 
									
										
										
										
											2016-02-02 11:22:48 -08:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2016-02-03 22:28:39 -08:00
										 |  |  |   search(term:string) { this._searchTermStream.next(term); } | 
					
						
							|  |  |  |   // #enddocregion subject
 | 
					
						
							| 
									
										
										
										
											2016-02-02 11:22:48 -08:00
										 |  |  | 
 | 
					
						
							|  |  |  |   // #docregion observable-operators
 | 
					
						
							|  |  |  |   items:Observable<string[]> = this._searchTermStream | 
					
						
							|  |  |  |     .debounceTime(300) | 
					
						
							|  |  |  |     .distinctUntilChanged() | 
					
						
							|  |  |  |     .switchMap((term:string) => this._wikipediaService.search(term)); | 
					
						
							|  |  |  | // #enddocregion observable-operators
 | 
					
						
							| 
									
										
										
										
											2016-02-02 02:27:52 -08:00
										 |  |  | } |