CODEWITHSUNDEEP
typescriptangularrxjsangular2-forms
user1896653
user1896653

Reputation: 3327

TypeError: search.valueChanges.debounceTime is not a function

I am just learning angular2. At the time of applying something at input changes, I am getting the error.

app.ts:

export class AppComponent {
    form: ControlGroup;

    constructor(fb: FormBuilder) {
        this.form = fb.group({
            search: []
        });

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

 }

Error:

enter image description here

How to solve this? Am I missing something?

Plunker Demo

N.B. I cannot produce anything at plunker as I am writing angular2 first time at plunker now. I have written only my app.ts code at plunker. I have showed the screenshot of error from my local pc. I will be grateful too if you tell me the way of running angular2 project at plunker.

Upvotes: 54

Views: 29693

Answers (4)

Pardeep Jain
Pardeep Jain

Reputation: 86790

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..

Upvotes: 100

Adrian
Adrian

Reputation: 9640

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 });
      });

Upvotes: 6

soni kumari
soni kumari

Reputation: 407

You can try:

import { debounceTime } from 'rxjs/operators';

Upvotes: 0

Fhulufhelo Mokhomi
Fhulufhelo Mokhomi

Reputation: 617

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));

Upvotes: 14

Related Questions