How to implement a debounce time in keyup event in Angular 6

Question

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 calle

Answer 1

If you are using angular 6 and rxjs 6, try this:
Notice the .pipe(debounceTime(1000)) before your subscribe

import { debounceTime } from 'rxjs/operators';


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

Answer 2

Also, you can use angular formControls to bind the input search field

<input  class="form-control form-control-lg" 
type="text" [formControl]="searchField"
placeholder="Search student by id or firstname or lastname">

and use valueChanges observable on our searchField to react to changes of out search field in your App.component.ts file.

searchField: FormControl; 

ngOnInit() {
    this.searchField.valueChanges
      .debounceTime(5000) 
      .subscribe(term => {
    // call your service endpoint.
      });
}

optionally you can use distinctUntilChanged ( which only publishes to its output stream if the value being published is different from the previous one)

searchField: FormControl; 

ngOnInit() {
    this.searchField.valueChanges
      .debounceTime(5000) 
     .distinctUntilChanged()
     .subscribe(term => {
            // call your service endpoint.
      });
}

Answer 3

For anyone coming across this in a newer version of angular (and rxjs).

The new Rxjs has pipeable operators and they can be used like this (from the accepted answers code)

ngOnInit() {
 this.subscription = this.searchTextChanged.pipe(
   debounceTime(1000),
   distinctUntilChanged(),
   mergeMap(search => this.getValues())
  ).subscribe((res) => {
    console.log(res);
  });

Answer 4

Just use like this, without RXJS.

It may call 'search()' function itself every keyups, but it does not call inside contents of the function(such as http connect) every time. Much simple solution.

export class MyComponent implements OnInit {

  debounce:any;

  constructor(){}
  
  search(){
    clearTimeout(this.debounce);
    this.debounce = setTimeout(function(){
      // Your Http Function..
    },500); // Debounce time is set to 0.5s
  }
}

Answer 5

In the component you can do somthing like this. Create RxJS Subject, In search method which is called on keyup event, do .next() on this Subject you have created. Then subscribe in ngOnInit() will debounce for 1 second, as in below code.

searchTextChanged = new Subject<string>();
constructor(private http:Http) {

}


ngOnInit(): void {
    this.subscription = this.searchTextChanged
        .debounceTime(1000)
        .distinctUntilChanged()
        .mergeMap(search => this.getValues())
        .subscribe(() => { });
}

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

search($event) {
    this.searchTextChanged.next($event.target.value);
}

rxjs v6 has several breaking changes including simplifying import points for operators. Try installing rxjs-compat, which adds back those import paths until the code has been migrated.

Import the necessary operators from RxJS. Below ones are for RxJS 5.x

import { Subject } from "rxjs/Subject";
import "rxjs/add/operator/debounceTime";
import "rxjs/add/operator/distinctUntilChanged";
import { Observable } from "rxjs/Observable";
import "rxjs/add/operator/mergeMap";

Answer 6

Demo Link

Tutorial Source Link

Using Template Variable

<input type="text" #movieSearchInput class="form-control" placeholder="Type any movie name" />

    ...
    ...    
        fromEvent(this.movieSearchInput.nativeElement, 'keyup').pipe(
        // get value
        map((event: any) => {
            return event.target.value;
        })
        // if character length greater then 2
        ,filter(res => res.length > 2)
        // Time in milliseconds between key events
        ,debounceTime(1000)        
        // If previous query is diffent from current   
        ,distinctUntilChanged()
        // subscription for response
        ).subscribe((text: string) => {
            this.isSearching = true;
            this.searchGetCall(text).subscribe((res)=>{
            console.log('res',res);
            this.isSearching = false;
            this.apiResponse = res;
            },(err)=>{
            this.isSearching = false;
            console.log('error',err);
            });
        });
    ...
    ...