X-Git-Url: https://juplo.de/gitweb/?p=examples%2Fangular-tour-of-heroes;a=blobdiff_plain;f=src%2Fapp%2Fhero-search%2Fhero-search.component.ts;fp=src%2Fapp%2Fhero-search%2Fhero-search.component.ts;h=98a085eb7ed3307e0974228aca4906b4338004fb;hp=0000000000000000000000000000000000000000;hb=b96b10a45927728a8e0c2234f494fb9eebd3df16;hpb=5c525c7b08b4ea57e94f1c8644297de8e443e2da

diff --git a/src/app/hero-search/hero-search.component.ts b/src/app/hero-search/hero-search.component.ts
new file mode 100644
index 0000000..98a085e
--- /dev/null
+++ b/src/app/hero-search/hero-search.component.ts
@@ -0,0 +1,40 @@
+import { Component, OnInit } from '@angular/core';
+
+import { Observable, Subject } from 'rxjs';
+
+import {
+  debounceTime, distinctUntilChanged, switchMap
+} from 'rxjs/operators';
+
+import { Hero } from '../hero';
+import { HeroService } from '../hero.service';
+
+@Component({
+  selector: 'app-hero-search',
+  templateUrl: './hero-search.component.html',
+  styleUrls: [ './hero-search.component.css' ]
+})
+export class HeroSearchComponent implements OnInit {
+  heroes$: Observable<Hero[]>;
+  private searchTerms = new Subject<string>();
+
+  constructor(private heroService: HeroService) {}
+
+  // Push a search term into the observable stream.
+  search(term: string): void {
+    this.searchTerms.next(term);
+  }
+
+  ngOnInit(): void {
+    this.heroes$ = this.searchTerms.pipe(
+      // wait 300ms after each keystroke before considering the term
+      debounceTime(300),
+
+      // ignore new term if same as previous term
+      distinctUntilChanged(),
+
+      // switch to new search observable each time the term changes
+      switchMap((term: string) => this.heroService.searchHeroes(term)),
+    );
+  }
+}