rxjs flatmap missing
It turns out the answer is quite simple: the operator is called mergeMap in this version of rxjs EDIT: Furthermore, you might have to use import ‘rxjs/add/operator/mergeMap’.
rxjs
How to catch error and continue executing a sequence in RxJs?
I would suggest that you use flatMap (now mergeMap in rxjs version 5) instead, which will let you collapse errors if you don’t care about them. Effectively, you will create an inner Observable that can be swallowed if an error occurs. The advantage of this approach is that you can chain together operators and if … Read more
Rxjs One Observable Feeding into Another
For transforming items emitted by an Observable into another Observable, you probably want to use the mergeMap operator. It creates an inner Observable and flattens its result to the outer stream. const source = this.myService .getFoo() .pipe( mergeMap(result => this.myService.getMoo(result)) ) .subscribe(result2 => { // do some stuff }); Here are some flat operators you … Read more
ObjectUnsubscribedError when trying to prevent subscribing twice
I would get the subscription and unsubscribe on it this way and not on the subject directly: ngOnInit() { this.pages$ = this.pagesService.getPagesListener(); this.subscription = this.pages$.subscribe((pages) => { // <——- this.pages = pages; console.log(pages); }); this.pagesService.getAll(); } ngOnDestroy() { this.subscription.unsubscribe(); // <——- }
why should we use subscribe() over map() in Angular?
If you want to return an Observable some other code can subscribe to, but you still want to manipulate the data events in the current method, use map. The actual user of the observable needs to subscribe(), because without subscribe() the observable won’t be executed at all. (forEach() or toArray() and probably others work as … Read more
Simple filter on array of RXJS Observable
You’ll want to filter the actual array and not the observable wrapped around it. So you’ll map the content of the Observable (which is an Epic[]) to a filtered Epic. getEpic(id: string): Observable<Epic> { return this.getEpics() .map(epics => epics.filter(epic => epic.id === id)[0]); } Then afterwards you can subscribe to getEpic and do whatever you … Read more
How to cancel/unsubscribe all pending HTTP requests in Angular 4+
Checkout the takeUntil() operator from RxJS to globally drop your subscriptions : – RxJS 6+ (using the pipe syntax) import { takeUntil } from ‘rxjs/operators’; export class YourComponent { protected ngUnsubscribe: Subject<void> = new Subject<void>(); […] public httpGet(): void { this.http.get() .pipe( takeUntil(this.ngUnsubscribe) ) .subscribe( (data) => { … }); } public ngOnDestroy(): void { … Read more
Hot and Cold observables: are there ‘hot’ and ‘cold’ operators?
I am coming back a few months later to my original question and wanted to share the gained knowledge in the meanwhile. I will use the following code as an explanation support (jsfiddle): var ta_count = document.getElementById(‘ta_count’); var ta_result = document.getElementById(‘ta_result’); var threshold = 3; function emits ( who, who_ ) {return function ( x … Read more
what is a `Scheduler` in RxJS
Rx schedulers provide an abstraction that allows work to be scheduled to run, possibly in the future, without the calling code needing to be aware of the mechanism used to schedule the work. Whenever an Rx method needs to generate a notification, it schedules the work on a scheduler. By supplying a scheduler to the … Read more
RxJS: takeUntil() Angular component’s ngOnDestroy()
You could leverage a ReplaySubject for that: EDIT: Different since RxJS 6.x: Note the use of the pipe() method. class myComponent { private destroyed$: ReplaySubject<boolean> = new ReplaySubject(1); constructor( private serviceA: ServiceA, private serviceB: ServiceB, private serviceC: ServiceC) {} ngOnInit() { this.serviceA .pipe(takeUntil(this.destroyed$)) .subscribe(…); this.serviceB .pipe(takeUntil(this.destroyed$)) .subscribe(…); this.serviceC .pipe(takeUntil(this.destroyed$)) .subscribe(…); } ngOnDestroy() { this.destroyed$.next(true); this.destroyed$.complete(); … Read more