diff --git a/public/docs/_examples/toh-6/ts/app/dashboard.component.html b/public/docs/_examples/toh-6/ts/app/dashboard.component.html
index e22a2a5ebb..fe1ee585f6 100644
--- a/public/docs/_examples/toh-6/ts/app/dashboard.component.html
+++ b/public/docs/_examples/toh-6/ts/app/dashboard.component.html
@@ -1,13 +1,10 @@
Top Heroes
-
diff --git a/public/docs/_examples/toh-6/ts/app/hero-search.component.ts b/public/docs/_examples/toh-6/ts/app/hero-search.component.ts
index 9ef06ca47c..81bb8eb773 100644
--- a/public/docs/_examples/toh-6/ts/app/hero-search.component.ts
+++ b/public/docs/_examples/toh-6/ts/app/hero-search.component.ts
@@ -17,23 +17,22 @@ export class HeroSearchComponent implements OnInit {
// #docregion search
heroes: Observable;
// #enddocregion search
- // #docregion searchSubject
- searchSubject = new Subject();
- // #enddocregion searchSubject
+ // #docregion searchTerms
+ searchTerms = new Subject();
+ // #enddocregion searchTerms
constructor(
private heroSearchService: HeroSearchService,
private router: Router) {}
- // #docregion searchSubject
+ // #docregion searchTerms
// Push a search term into the observable stream.
- search(term: string) { this.searchSubject.next(term); }
- // #enddocregion searchSubject
+ search(term: string) { this.searchTerms.next(term); }
+ // #enddocregion searchTerms
// #docregion search
ngOnInit() {
- this.heroes = this.searchSubject
- .asObservable() // cast as Observable
+ this.heroes = this.searchTerms
.debounceTime(300) // wait for 300ms pause in events
.distinctUntilChanged() // ignore if next search term is same as previous
.switchMap(term => term // switch to new observable each time
@@ -41,9 +40,8 @@ export class HeroSearchComponent implements OnInit {
? this.heroSearchService.search(term)
// or the observable of empty heroes if no search term
: Observable.of([]))
-
.catch(error => {
- // Todo: real error handling
+ // TODO: real error handling
console.log(error);
return Observable.of([]);
});
diff --git a/public/docs/_examples/toh-6/ts/app/hero-search.service.ts b/public/docs/_examples/toh-6/ts/app/hero-search.service.ts
index 42018e3526..95a31707eb 100644
--- a/public/docs/_examples/toh-6/ts/app/hero-search.service.ts
+++ b/public/docs/_examples/toh-6/ts/app/hero-search.service.ts
@@ -9,11 +9,9 @@ export class HeroSearchService {
constructor(private http: Http) {}
- // #docregion observable-search
search(term: string) {
return this.http
- .get(`app/heroes/?name=${term}+`)
+ .get(`app/heroes/?name=${term}`)
.map((r: Response) => r.json().data as Hero[]);
}
- // #enddocregion observable-search
}
diff --git a/public/docs/ts/latest/tutorial/toh-pt6.jade b/public/docs/ts/latest/tutorial/toh-pt6.jade
index 104c8575fe..c7edf449fc 100644
--- a/public/docs/ts/latest/tutorial/toh-pt6.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt6.jade
@@ -419,11 +419,11 @@ block observables-section
Time to create the `HeroSearchComponent` class and metadata.
+makeExample('toh-6/ts/app/hero-search.component.ts', null,'hero-search.component.ts')
:marked
- Focus on the `searchSubject`.
- +makeExample('toh-6/ts/app/hero-search.component.ts', 'searchSubject')(format=".")
+ Focus on the `searchTerms`.
+ +makeExample('toh-6/ts/app/hero-search.component.ts', 'searchTerms')(format=".")
:marked
A `Subject` is a producer of an _observable_ event stream.
- This `searchSubject` produces an `Observable` of strings, the filter criteria for the name search.
+ This `searchTerms` produces an `Observable` of strings, the filter criteria for the name search.
Each call to `search` puts a new string into this subject's _observable_ stream by calling `next`.
@@ -439,8 +439,6 @@ block observables-section
Fortunately we can chain `Observable` operators to the string `Observable` that reduce the request flow.
We'll make fewer calls to the `HeroSearchService` and still get timely results. Here's how:
- * The `asObservable` operator casts the `Subject` as an `Observable` of filter strings.
-
* `debounceTime(300)` waits until the flow of new string events pauses for 300 milliseconds
before passing along the latest string. We'll never make requests more frequently than 300ms.
@@ -495,11 +493,11 @@ block observables-section
+makeExample('toh-6/ts/app/app.component.ts', 'rxjs-extensions', 'app/app.component.ts')(format=".")
:marked
- ### Adding the search component to the dashboard
+ ### Add the search component to the dashboard
- We add the `HeroSearchComponent` to the bottom of the `DashboardComponent` template.
+ We add the hero search HTML element to the bottom of the `DashboardComponent` template.
- +makeExample('toh-6/ts/app/dashboard.component.html', null, 'dashboard.component.html')
+ +makeExample('app/dashboard.component.html')
:marked
And finally, we import the `HeroSearchComponent` and add it to the `directives` array.