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 +