tweak

tweak

Author: thelgevold

public/docs/_examples/toh-6/ts/app/hero-search.component.html

@@ -1,8 +1,8 @@
 <!-- #docregion -->
 <div id="search-component">
   <h4>Hero Search</h4>  
-  <input id="search-box" [ngFormControl]="search" />    
-  <div *ngIf="showResult">
+  <input #searchBox id="search-box" (keyup)="search.next(searchBox.value)" />    
+  <div>
     <div class="search-result" (click)="gotoDetail(hero)" *ngFor="let hero of heroes">
       {{hero.name}}
     </div>

public/docs/_examples/toh-6/ts/app/hero-search.component.ts

@@ -1,7 +1,8 @@
 // #docregion
 import { Component, OnInit } from '@angular/core';
-import { Control }           from '@angular/common';
 import { Router }            from '@angular/router';
+import { Observable }        from 'rxjs/Observable';
+import { Subject }           from 'rxjs/Subject';
 
 import { HeroSearchService } from './hero-search.service';
 import { Hero } from './hero';
@@ -12,9 +13,8 @@ import { Hero } from './hero';
   providers: [HeroSearchService]
 })
 export class HeroSearchComponent implements OnInit {
-  search = new Control('');
+  search = new Subject<string>();
   heroes: Hero[] = [];
-  showResult = true;
 
   constructor(private _heroSearchService: HeroSearchService, private _router: Router) {}
 
@@ -25,13 +25,13 @@ export class HeroSearchComponent implements OnInit {
 
   // #docregion search
   ngOnInit() {
-    this.search.valueChanges
+    this.search.asObservable()
                .debounceTime(300)
                .distinctUntilChanged()
-               .do(value => this.showResult = value.length > 0)
-               .filter(value => value.length > 0)
-               .switchMap(term => this._heroSearchService.search(term))
-               .subscribe(result => this.heroes = result, error => console.log(error));
+               .switchMap(term => term ? this._heroSearchService.search(term)
+                                       : Observable.of([]))
+               .subscribe(result => this.heroes = result,
+                                    error => console.log(error));
   }
   // #enddocregion search
 }

public/docs/_examples/toh-6/ts/app/rxjs-operators.ts

@@ -5,3 +5,4 @@ import 'rxjs/add/operator/filter';
 import 'rxjs/add/operator/do';
 import 'rxjs/add/operator/distinctUntilChanged';
 import 'rxjs/add/operator/debounceTime';
+import 'rxjs/add/observable/of';

public/docs/ts/latest/tutorial/toh-pt6.jade

@@ -351,6 +351,13 @@ block heroes-comp-add
   But the component is still responsible for updating the display.
   So the *delete* method removes the deleted hero from the list.
 
+block review
+  :marked
+    ### Let's see it
+    Here are the fruits of labor in action:
+  figure.image-display
+    img(src='/resources/images/devguide/toh/toh-http.anim.gif' alt="Heroes List Editting w/ HTTP")
+
 :marked
   ## Observables
 
@@ -384,7 +391,7 @@ block heroes-comp-add
 :marked
   The `HeroSearchComponent` UI is simple - just a textbox and a list of matching search results. 
 
-  We have bound the `search` property to the textbox as an `ngFormControl` in order to track changes. 
+  To keep track of text changes in the search box we are using an RxJs `Subject`.
 
   Observables are great for managing event streams. In our example we will actually be dealing with two different types of event streams:
 
@@ -399,28 +406,24 @@ block heroes-comp-add
 +makeExample('toh-6/ts/app/hero-search.component.ts', 'search', 'app/hero-search.component.ts')(format=".")
 
 :marked
-  ### valueChanges
-  `ValueChanges` is an observable that represents text changes triggered by typing into the search textbox. 
+  ### asObservable
+  We start the observable chain by calling `asObservable` on our `Subject` to return an observable that represents text changes as we are typing into the search box.
 
   ### debounceTime(300)
   By specifying a debounce time of 300 ms we are telling `RxJs` that we only want to be notified of key events after intervals of 300 ms. This is a performance measure meant to prevent us from hitting the api too often with partial search queries.
 
   ### distinctUntilChanged
   `distinctUntilChanged` tells `RxJs` to only react if the value of the textbox actually changed.
 
-  ### do
-  `do` is an operator for triggering side effects outside the observable chain. In our case we are using it to set a flag to hide the search results if the search textbox is empty.
-  
-  ### filter
-  By specifying a `filter` we are telling `RxJs` to only process search values that meet our filter condition.
-  
   ### switchMap
   `switchMap` is where observables from key events and observables from http calls converge on a single observable. 
 
   Every qualifying key event will trigger an http call, so we may get into a situation where we have multiple http calls in flight. 
 
   Normally this could lead to results being returned out of order, but `switchMap` has built in support for ensuring that only the most recent http call will be processed. Results from prior calls will be discarded.  
 
+  We short circuit the http call and return an observable containing an empty array if the search box is empty.
+
   ### subscribe
   `subscribe` is similar to `then` in the promise world. 
 
@@ -431,7 +434,7 @@ block heroes-comp-add
   In our current implementation we are just logging the error to the console, but a real life application should do better.
 
   ### Import operators
-  These operators we are not included by default, so we have to load each one using `import` statements. 
+  The `RxJs` operators are not included by default, so we have to include them using `import` statements. 
 
   We have combined all operator imports in a single file.
 
@@ -448,13 +451,6 @@ block heroes-comp-add
 figure.image-display
   img(src='/resources/images/devguide/toh/toh-hero-search.png' alt="Hero Search Component")
 
-block review
-  :marked
-    ### Let's see it
-    Here are the fruits of labor in action:
-  figure.image-display
-    img(src='/resources/images/devguide/toh/toh-http.anim.gif' alt="Heroes List Editting w/ HTTP")
-
 .l-main-section
 :marked
   ## Application structure and code