Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to combine multiple Observables together in Angular 2

So I've just started programming with Angular 2 and just got started on learning about subscribe, Subject and BehaviorSubject. Currently I have multiple subscriptions to obtain values stored in my service and emitted to a component. My application works and all but I know it is very inefficient. That it has gotten out of hand in my component:

this.threatService.minLimitChange$.subscribe( min => { this.min = min; this.getSession();});
this.threatService.maxLimitChange$.subscribe( max => { this.max = max; this.getSession();});

(and like 5 other more that obtains a single value and calls function getSession() each time)

In my threat.service:

private minLimitChangeSource = new BehaviorSubject<number>(this.min);
private maxLimitChangeSource = new BehaviorSubject<number>(this.max);
minLimitChange$ = this.minLimitChangeSource.asObservable();
maxLimitChange$ = this.maxLimitChangeSource.asObservable();

So I've tried:

this.threatService.minLimitChange$.concat(this.threatService.maxLimitChange$).subscribe( res => console.log(res));

Which my aim was just to test what res was because I wasn't sure how to access the two values... but I'm getting this in my console. ;/

TypeError: this.threatService.minLimitChange$.merge is not a function. (In 'this.threatService.minLimitChange$.concat(this.threatService.maxLimitChange$)', 'this.threatService.minLimitChange$.concat' is undefined)

Ultimately, I'd like to get all values that getSession() needs from my service and run that function once. I would really appreciate any help or explanation on how to use concat, merge or forkJoin to combine my subscriptions please. Thank you!

like image 238
mshantic Avatar asked Jul 14 '16 02:07

mshantic


People also ask

How do I combine multiple observables into one?

We can use the concat operator to take multiple Observables and return a new Observable that sequentially emits values from each Observable that were passed in. It works by subscribing to them one at a time and merging the results in the output Observable.

What is the use of forkJoin in Angular?

Why use forkJoin ? This operator is best used when you have a group of observables and only care about the final emitted value of each. One common use case for this is if you wish to issue multiple requests on page load (or some other event) and only want to take action when a response has been received for all.

What is mergeMap in Angular?

mergeMap operator is basically a combination of two operators - merge and map. The map part lets you map a value from a source observable to an observable stream. Those streams are often referred to as inner streams.

What is the difference between combineLatest and forkJoin?

The combineLatest operator enforces a source Observable to start emitting only when all the inner Observables emit at least once. The forkJoin operator enforces a source Observable to start emitting only when all the inner Observables are complete.


1 Answers

You can use Observable.combineLatest to combine 2 observable streams into one:

combineObs = obs1.combineLatest(obs2, 
  (val1, val2) => { 
    return {val1: val1, val2: val2};
  });

Working plunker: http://plnkr.co/edit/mmCzEmdKexpaWNM53me9?p=preview

like image 60
Harry Ninh Avatar answered Sep 26 '22 17:09

Harry Ninh