Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Cannot import Observable.fromEvent - RXJS

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);
      });

  }

}
like image 974
avechuche Avatar asked May 15 '18 16:05

avechuche


People also ask

What is FromEvent in RxJS?

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.

Which can be used to import 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.

Where do I import Observable in angular 8?

imports: [ BrowserModule, HttpClientModule ], Back to `src/app/app. component. ts` then add these imports of the required Angular HttpClient, RxJS, and Observable.


1 Answers

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')
like image 160
siva636 Avatar answered Sep 17 '22 17:09

siva636