From 0e1153d16a23c7597600407e5ec2f4da6bfc9627 Mon Sep 17 00:00:00 2001 From: Matt Huntington Date: Sun, 25 Jun 2017 01:00:11 -0400 Subject: [PATCH] setting up observable for typing into input --- src/app/search/search.component.ts | 33 +++++++++++++++++++++--------- 1 file changed, 23 insertions(+), 10 deletions(-) diff --git a/src/app/search/search.component.ts b/src/app/search/search.component.ts index 54f2437..bf418b8 100644 --- a/src/app/search/search.component.ts +++ b/src/app/search/search.component.ts @@ -1,7 +1,10 @@ import { Component, OnInit } from '@angular/core'; import { Http } from '@angular/http'; -import 'rxjs/add/operator/map'; -import 'rxjs/add/operator/toPromise'; +import { Subject } from 'rxjs/Subject'; + +// Observable operators +import 'rxjs/add/operator/debounceTime'; +import 'rxjs/add/operator/distinctUntilChanged'; @Component({ selector: 'app-search', @@ -10,25 +13,35 @@ import 'rxjs/add/operator/toPromise'; }) export class SearchComponent implements OnInit { results; + searchTerms = new Subject(); constructor( private http: Http ) { } findCharacter(name){ - const result = this.http.get('http://swapi.co/api/people/?search=' + name) - .map((response)=>{ - return response.json().results; - }).subscribe( - (response)=>{ - this.results = response; - } - ); + this.searchTerms.next(name); + + // const result = this.http.get('http://swapi.co/api/people/?search=' + name) + // .map((response)=>{ + // return response.json().results; + // }).subscribe( + // (response)=>{ + // this.results = response; + // } + // ); + // .toPromise() // .then(response => console.log(this.results = response.json().results) ); } ngOnInit() { + this.searchTerms + .debounceTime(300) + .distinctUntilChanged() + .subscribe((term)=>{ + console.log(term); + }); } }