TypeError: search.valueChanges.debounceTime is not a function

Question

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:

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.

Answer 1

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