How to add debounce time to in input search box in typescript?

Question

How can i add debounce time to dynamic search box that searches data on table data ? I have looked at some solution on the site but my code is little bit different, I do not use any throttle or something else so I am just confused.

my template code:

<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Search element">

and typescript for that is:

applyFilter(filterValue: string) {
    this.tableDataSource.filter = filterValue.trim().toLowerCase();
}

I want to add debounce time for that the search will be made every 2 seconds and not sending lots of request for every change.

Thanks in advance

I have tried to call the method from another method with pipe

filterData(filterValue: string) {
    this.applyFilter(filterValue).pipe(debounceTime(2000))
}

but now it says, pipe does not exist on type void

Take a look at [this question](https://stackoverflow.com/q/41308826/1009922). — ConnorsFan, Feb 20 '19 at 13:02
Possible duplicate of [Rxjs debounce on react text input component](https://stackoverflow.com/questions/44299632/rxjs-debounce-on-react-text-input-component) — theMayer, Feb 20 '19 at 13:05
i tried already like in the answers you suggested but pipe,subscribe,oberve does not exist on type void error comes. I tried as in the question update in last part. — abidinberkay, Feb 20 '19 at 13:26
Using a FormControl https://stackoverflow.com/questions/50732416/rxjs-distinctuntilchanged-with-keyup-event/50734973?noredirect=1#comment96296332_50734973 — Eliseo, Feb 20 '19 at 14:39

score 11 · Answer 1 · edited May 14 '19 at 15:25

Template:

<input matInput (input)="terms$.next($event.target.value)" type="text" 
  placeholder="Search element">

Component:

private terms$ = new Subject<string>();

ngOnInit () {
  this.terms$.pipe(
    debounceTime(400), // discard emitted values that take less than the specified time between output
    distinctUntilChanged() // only emit when value has changed
  ).subscribe(term => {
    // do your search with the term
  });
}

score 9 · Accepted Answer · answered Feb 20 '19 at 13:35

You are using pipe operator against a string. You can only use pipe against an Observable. So, You should create a Subject in your component. Subject in RxJS acts as both an Observable and Observer. In other words, it emits the value as well as listen for that value when the value changes.

private searchSub$ = new Subject<string>();

applyFilter(filterValue: string) {
    this.searchSub$.next(filterValue)
}

ngOnInit() {
   this.searchSub$.pipe(
     debounceTime(400),
     distinctUntilChanged()
   ).subscribe((filterValue: string) => {
     this.tableDataSource.filter = filterValue.trim().toLowerCase();
   });
}

When the applyFilter() method calls on every key press, the Subject emits the filterValue. In your ngOnInit(), you should listen / subscribe to you Subject, so there you can use the pipe operator and debounceTime.

Thanks! nice way to go with. – Avi Siboni Aug 15 '21 at 20:39 — Avi Siboni, Aug 15 '21 at 20:39

Patrik Kelemen · Answer 3 · 2019-03-07T13:54:27.743

3

Simply use lodash-decorators and lodash

import { Debounce } from 'lodash-decorators';

class AnyClass {
  constructor() {
    ...
  }

  @Debounce(100)
  filterData(filterValue: string) {
    ...
  }
}

edited Mar 07 '19 at 13:54

answered Feb 20 '19 at 14:06

Patrik Kelemen

159
3

How to add debounce time to in input search box in typescript?

3 Answers3