add rxjs

src/app/app.component.html

@@ -1,6 +1,6 @@
 <div>
   <h2>wikipedia search</h2>
-  <input (input)="search($event.target.value)">
+  <input (input)="term$.next($event.target.value)">
   <ul>
     <li *ngFor="let item of items; index as i">
         <a href="{{links[i]}}">{{item}}</a>

src/app/app.component.ts

@@ -1,6 +1,10 @@
 import { Component } from '@angular/core';
-
 import { WikipediaSearchService } from "./wikipedia-search.service";
+import { Subject } from "rxjs/Subject";
+
+import 'rxjs/add/operator/debounceTime';
+import 'rxjs/add/operator/distinctUntilChanged';
+import 'rxjs/add/operator/switchMap';
 
 @Component({
   selector: 'app-root',
@@ -10,8 +14,18 @@ import { WikipediaSearchService } from "./wikipedia-search.service";
 export class AppComponent {
   items:Array<string>;
   links:Array<string>;
+  term$ = new Subject<string>();
 
-  constructor(private service:WikipediaSearchService){}
+  constructor(private service:WikipediaSearchService){
+    this.term$
+        .debounceTime(400)
+        .distinctUntilChanged()
+        .switchMap(term => this.service.search(term))
+        .subscribe(results => [
+          this.items= results[1],
+          this.links= results[3]
+        ]);
+  }
 
   search(term: string){
     this.service.search(term).subscribe(results => [

src/app/wikipedia-search.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { HttpClient,HttpHeaders, HttpParams } from '@angular/common/http';
-import 'rxjs/add/operator/map'
+import 'rxjs/add/operator/map';
 
 @Injectable()
 export class WikipediaSearchService {