From 53eea259d2796f5c84ca4693e61ad287ceb4c8d5 Mon Sep 17 00:00:00 2001
From: Matt Huntington <matt.huntington@gmail.com>
Date: Mon, 26 Jun 2017 23:30:57 -0400
Subject: [PATCH] Pass an observable off to the HTML

---
 day3/README.md                                | 78 +++++++++++++++++++
 .../src/app/search/search.component.html      |  4 +-
 .../src/app/search/search.component.ts        | 10 +--
 3 files changed, 84 insertions(+), 8 deletions(-)

diff --git a/day3/README.md b/day3/README.md
index 8ed12c0..fe29505 100644
--- a/day3/README.md
+++ b/day3/README.md
@@ -10,6 +10,7 @@
 1. Check for distinct events from an observable
 1. Create a service for an observable
 1. Format the content of the event being published
+1. Pass an observable off to the HTML
 
 ## Describe publish/subscribe model and how it relates to Observables
 
@@ -310,3 +311,80 @@ Back in `src/app/search/search.component.ts` we can simplify what comes back fro
 this.searchService.createAPIObservable(name)
     .subscribe(results => this.results = results);
 ```
+
+## Pass an observable off to the HTML
+
+We can operate on an observable in the HTML.  This cleans up our code a bit.  First add `switchMap` functionality to `src/app/search/search.component.ts`:
+
+```javascript
+import 'rxjs/add/operator/switchMap';
+```
+
+Now change subscribe to switchMap.
+
+```javascript
+this.searchSubject
+    .debounceTime(300)
+    .distinctUntilChanged()
+    .switchMap(name => this.searchService.createAPIObservable(name))
+    .subscribe(results => this.results = results);
+```
+
+`.subscribe(results => this.results = results)` is actually subscribing to the observable created by `searchService`, NOT `searchSubject`.  It may look like it's subscribing to `this.searchSubject`, but it's not.  It's essentially mapping any event published by `searchSubject` to the one created by `this.searchService.createAPIObservable()`.
+
+Lastly, we can remove the `.subscribe()` code altogether and set `this.results` to the observable returned by the rest of the statement:
+
+```javascript
+ngOnInit() {
+    this.results = this.searchSubject
+        .debounceTime(300)
+        .distinctUntilChanged()
+        .switchMap(name => this.searchService.createAPIObservable(name));
+}
+```
+
+Now change the HTML in `src/app/search/search.component.html` to handle the fact that `this.results` is actually an observable.
+
+```html
+<li *ngFor="let character of results | async">
+```
+
+This should work.  Let's clean up our names so it's clear.  Edit `src/app/search/search.component.ts`:
+
+```javascript
+export class SearchComponent implements OnInit {
+
+    apiObservable; //used to be results
+    searchSubject = new Subject();
+
+    constructor(
+        private http: Http,
+        private searchService: SearchService
+    ) { }
+
+    findCharacter(name){
+        this.searchSubject.next(name);
+    }
+
+    ngOnInit() {
+        //this.results = this.apiObservable
+        this.apiObservable = this.searchSubject
+            .debounceTime(300)
+            .distinctUntilChanged()
+            .switchMap(name => this.searchService.createAPIObservable(name));
+    }
+
+}
+```
+
+Now edit `src/app/search/search.component.html`:
+
+```html
+<section *ngIf="apiObservable">
+```
+
+and:
+
+```html
+<li *ngFor="let character of apiObservable | async">
+```
diff --git a/day3/starwars/src/app/search/search.component.html b/day3/starwars/src/app/search/search.component.html
index 4dde908..14d2e5d 100644
--- a/day3/starwars/src/app/search/search.component.html
+++ b/day3/starwars/src/app/search/search.component.html
@@ -2,10 +2,10 @@
     <h2>Search For A Star Wars Character</h2>
     <input [(ngModel)]="name" type="text" placeholder="Character Name" (keyup)="findCharacter(name)" />
 </section>
-<section *ngIf="results">
+<section *ngIf="apiObservable">
     <h2>Search Results</h2>
     <ul>
-        <li *ngFor="let character of results">
+        <li *ngFor="let character of apiObservable | async">
             <h3>{{character.name}}</h3>
             <dl>
                 <dt>Birth Year</dt>
diff --git a/day3/starwars/src/app/search/search.component.ts b/day3/starwars/src/app/search/search.component.ts
index aa3306c..c9ced1d 100644
--- a/day3/starwars/src/app/search/search.component.ts
+++ b/day3/starwars/src/app/search/search.component.ts
@@ -4,6 +4,7 @@ import { Http } from '@angular/http';
 import { Subject } from 'rxjs/Subject'
 import 'rxjs/add/operator/debounceTime';
 import 'rxjs/add/operator/distinctUntilChanged';
+import 'rxjs/add/operator/switchMap';
 
 import { SearchService } from './search.service'
 
@@ -14,7 +15,7 @@ import { SearchService } from './search.service'
 })
 export class SearchComponent implements OnInit {
 
-    results;
+    apiObservable;
     searchSubject = new Subject();
 
     constructor(
@@ -27,13 +28,10 @@ export class SearchComponent implements OnInit {
     }
 
     ngOnInit() {
-        this.searchSubject
+        this.apiObservable = this.searchSubject
             .debounceTime(300)
             .distinctUntilChanged()
-            .subscribe(name => {
-                this.searchService.createAPIObservable(name)
-                    .subscribe(results => this.results = results);
-            })
+            .switchMap(name => this.searchService.createAPIObservable(name));
     }
 
 }