I'm trying to create an Observable from an input event. I have already tried almost everything and I can not import "fromEvent". This is my code. I am using angular 6.0.1 and RXJS 6.1.0
error TS2339: Property 'fromEvent' does not exist on type 'typeof Observable'.
import { Directive, EventEmitter, Input, Output, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { NgControl } from '@angular/forms';
import { distinctUntilChanged } from 'rxjs/internal/operators/distinctUntilChanged';
import { debounceTime } from 'rxjs/internal/operators/debounceTime';
import { map } from 'rxjs/internal/operators/map';
import { filter } from 'rxjs/internal/operators/filter';
import { Observable } from 'rxjs/internal/Observable';
//import 'rxjs/internal/observable/fromEvent';
//import 'rxjs/add/observable/fromEvent';
@Directive({
selector: '[ngModel][debounceTime]'
})
export class InputDebounceDirective implements AfterViewInit {
@Output()
public onDebounce = new EventEmitter<any>();
@Input('debounceTime')
public debounceTime: number = 1500;
constructor(private elementRef: ElementRef, private currentModel: NgControl) { }
ngAfterViewInit() {
Observable.fromEvent(this.elementRef.nativeElement, 'keyup')
.pipe(
debounceTime(this.debounceTime),
distinctUntilChanged()
)
.subscribe(x => {
this.onDebounce.emit(x);
});
}
}
FromEvent: FromEvent is a method provided by RxJs to create Observable. The best thing is that we can create Observable from DOM events directly. By DOM events, it means click event, key up events, scroll events, etc. that is a simple mouse click, we can create a stream of data, i.e. an Observable.
import {Observable} from 'rxjs/Observable'; would import the Observable, but you don't need to import it all if you are using promises... toPromise works without it.
imports: [ BrowserModule, HttpClientModule ], Back to `src/app/app. component. ts` then add these imports of the required Angular HttpClient, RxJS, and Observable.
You must import fromEvent
as follows in RxJS6:
import {fromEvent} from 'rxjs';
Read the migration guide for further information, in particular have a look on the import paths section there.
When using fromEvent
use it as a function as follows:
fromEvent(this.elementRef.nativeElement, 'keyup')
Not as a static method as follows (this was correct in previous RxJS versions)
Observable.fromEvent(this.elementRef.nativeElement, 'keyup')
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With