TypeError: search.valueChanges.debounceTime is not a function TypeError: search.valueChanges.debounceTime is not a function typescript typescript

TypeError: search.valueChanges.debounceTime is not a function


you Just need to import these to remove your error. You are getting runtime error because Observables by default come with just a few operators. You have to explicitly import them like this -

import 'rxjs/add/operator/debounceTime';import 'rxjs/add/operator/map';

Working example

Update

Angular 6 onwards, debounceTime is imported as following -

import { debounceTime } from 'rxjs/operators';

other imports you can import from this path are -

  • switchMap
  • tap
  • map
  • distinctUntilChanged

etc..


Put debounceTime(400) inside a pipe() function.

example

var search = this.form.find('search');    search.valueChanges        .pipe(debounceTime(400))        .map(str => (<string>str).replace(' ','‐'))        .subscribe(x => console.log(x));


Two things:

add imports for each operator

import { debounceTime, distinctUntilChanged } from 'rxjs/operators';

and then use pipes to pass all the RxJS operators

    this.searchTextInput.valueChanges      .pipe(        debounceTime(500),        distinctUntilChanged(),      )      .subscribe((term): void => {        console.log({ term });      });