angular2 Observable Property 'debouceTime' does not exist on type 'Observable<any>'
Be sure you've initiated that in main.ts (where the app is bootstraped)
import "rxjs/add/operator/map";
import "rxjs/add/operator/debounceTime";
...
or all at once
import "rxjs/Rx";
EXTEND
there is a working example
//our root app component
import {Component, EventEmitter, ChangeDetectorRef} from '@angular/core'
import {Observable} from "rxjs/Rx";
@Component({
selector: 'my-app',
providers: [],
template: `
<div>
<h2>Hello {{name}}</h2>
<div>debounced message: {{message}}</div>
</div>
`,
directives: []
})
export class App {
protected message: string;
protected emitter = new EventEmitter<string>();
public obs: Observable<string>;
constructor() {
this.name = 'Angular2 (Release Candidate!)'
this.obs = this.emitter
.map(x => x)
.debounceTime(1200)
;
this.obs.subscribe(msg => this.message = msg);
}
ngOnInit(){
this.emitter.emit("hello after debounce");
}
}
and that is working when in main.ts we have:
//main entry point
import {bootstrap} from '@angular/platform-browser-dynamic';
import {App} from './app';
import "rxjs/Rx";
bootstrap(App, [])
.catch(err => console.error(err));
Check it here
For everyone coming here after rxjs 6:
You now need to use a pipe()
:
What was
myObservable$
.debounceTime(500)
.subscribe(val => {
// debounced stuff
})
needs now to be:
myObservable$
.pipe(debounceTime(500))
.subscribe(val => {
// debounced stuff
})
https://www.learnrxjs.io/operators/filtering/debouncetime.html
You have a typo here. It's debounceTime, not debouceTime :)