As a beginner with observables, I'm currently working on creating an observable clickstream to avoid capturing the 2 click events that happen during a double-click. However, I keep encountering this error message:-
Error: Unhandled Promise rejection - this.clickStream.buffer is not a function ; Zone: <root> ; Task: Promise.then ; Value: TypeError: this.clickStream.buffer is not a functionand it's leaving me puzzled.
Here's the snippet of code in question:-
import {Component, NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {Subject} from 'rxjs/Subject';
import {Observable} from 'rxjs/Observable';
@Component({
selector: 'my-app',
template: `
<div>
<button (click)="clickStream.next(1)">Click me!</button>
</div>
`,
})
export class App {
clickStream: Observable<number> = new Subject<number>();
singleClick;
constructor() {
this.singleClick = this.clickStream.buffer(() => this.clickStream
.debounce(250))
.map(arr => arr.length)
.filter(len => len != 2);
this.singleClick.subscribe(console.log.bind(console));
}
}
@NgModule({
imports: [ BrowserModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}
I've been utilizing the Angular + Typescript Demo Plunk for testing purposes.