How to implement a debounce time in keyup event in Angular 6 : <p>I create an Angular app that search students from API. It works fine but it calls API every time an input value is changed. I've done a research that I need something called debounce ,but I don't know how to implement this in my app.</p>

<p><strong>App.component.html</strong></p>

<pre><code>    &lt;div class="container"&gt;
  &lt;h1 class="mt-5 mb-5 text-center"&gt;Student&lt;/h1&gt;
&lt;div class="form-group"&gt;
  &lt;input  class="form-control form-control-lg" type="text" [(ngModel)]=q (keyup)=search() placeholder="Search student by id or firstname or lastname"&gt;
&lt;/div&gt;
 &lt;hr&gt;
 &lt;table class="table table-striped mt-5"&gt;
    &lt;thead class="thead-dark"&gt;
      &lt;tr&gt;
        &lt;th scope="col" class="text-center" style="width: 10%;"&gt;ID&lt;/th&gt;
        &lt;th scope="col" class="text-center" style="width: 30%;"&gt;Name&lt;/th&gt;
       &lt;th scope="col" style="width: 30%;"&gt;E-mail&lt;/th&gt;
        &lt;th scope="col" style="width: 30%;"&gt;Phone&lt;/th&gt; 
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr *ngFor="let result of results"&gt;
        &lt;th scope="row"&gt;{{result.stu_id}}&lt;/th&gt;
        &lt;td&gt;{{result.stu_fname}} {{result.stu_lname}}&lt;/td&gt;
         &lt;td&gt;{{result.stu_email}}&lt;/td&gt;
        &lt;td&gt;{{result.stu_phonenumber}}&lt;/td&gt; 
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
&lt;/div&gt;
</code></pre>

<p><strong>App.component.ts</strong></p>

<pre><code>import { Component} from '@angular/core';
import { Http,Response } from '@angular/http';
import { Subject, Observable } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent  {


  results;
  q = '';

  constructor(private http:Http) {


  }


  search() {
    this.http.get("https://www.example.com/search/?q="+this.q)
    .subscribe(
      (res:Response) =&gt; {
          const studentResult = res.json();
          console.log(studentResult);
          if(studentResult.success) {
            this.results = studentResult.data;
          } else {
            this.results = [];
          }
      }
    )
  }
}
</code></pre>

<p><strong>Screenshot</strong>
<a href="https://i.stack.imgur.com/mt9mt.png" rel="noreferrer"><img src="https://i.stack.imgur.com/mt9mt.png" alt="Screenshot"></a></p>

<p>I've tried something like this but it's error 
<strong>Property debounceTime does not exist on type Subject&lt;{}></strong></p>

<pre><code>  mySubject = new Subject();
  constructor(private http:Http)  {
    this.mySubject
    .debounceTime(5000)
    .subscribe(val =&gt; {
      //do what you want
    });
  }
</code></pre>

<p>and this's also not work. <strong>Property 'fromEvent' does not exist on type 'typeof Observable'</strong> </p>

<pre><code>    Observable.fromEvent&lt;KeyboardEvent&gt;(this.getNativeElement(this.term), 'keyup')
</code></pre>

<p>So, what's the correct way to implement this ? </p>

<p>Thank you.</p>
