I am having a problem trying to create to turn the keyup events into an observable stream.
I am following the Ng-book version 6. I am stuck in an ex
This should work in your case :
import { fromEvent } from 'rxjs';
import { map, filter, debounceTime, tap, switchAll } from 'rxjs/operators';
const obs = fromEvent(this.el.nativeElement, 'keyup')
.pipe (
map((e:any) => e.target.value), // extract the value of the input
// filter((text:string) => text.length > 1), //filter out if empty
debounceTime(250), //only search after 250 ms
tap(() => this.loading.emit(true)), // Enable loading
// search, call the search service
map((query:string) => this.youtube.search(query)) ,
// discard old events if new input comes in
switchAll()
// act on the return of the search
)
Hope it helps !
EDIT Here is a working demo on Stackblitz: Demo Angular 6 + Rxjs 6
In RxJS 5, you were writing
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/map';
The imports changed for RxJS 6
import { Observable, of, Subject, Subscription } from 'rxjs';
import { map, filter, debounceTime, distinctUntilChanged } from 'rxjs/operators';
For more information, have a look at the RxJS migration guide.