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:
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.
Solution 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..
Solution 2:
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));