combineLatest
signature: combineLatest(observables: ...Observable, project: function): Observable
combineLatest(observables: ...Observable, project: function): Observable
When any observable emits a value, emit the last emitted value from each.
💡 combineAll can be used to apply combineLatest to emitted observables when a source completes!
Why use combineLatest
?
combineLatest
?This operator is best used when you have multiple, long-lived observables that rely on each other for some calculation or determination. Basic examples of this can be seen in example three, where events from multiple buttons are being combined to produce a count of each and an overall total, or a calculation of BMI from the RxJS documentation.
Be aware that combineLatest
will not emit an initial value until each observable emits at least one value. This is the same behavior as withLatestFrom
and can be a gotcha as there will be no output and no error but one (or more) of your inner observables is likely not functioning as intended, or a subscription is late.
Lastly, if you are working with observables that only emit one value, or you only require the last value of each before completion, forkJoin
is likely a better option.
Examples
Example 1: Combining observables emitting at 3 intervals
( StackBlitz )
Example 2: combineLatest with projection function
( StackBlitz )
Example 3: Combining events from 2 buttons
( StackBlitz )
HTML
Related Recipes
Additional Resources
combineLatest 📰 - Official docs
combineLatest - In Depth Dev Reference
Combining streams with combineLatest 🎥 💵 - John Linquist
Combination operator: combineLatest 🎥 💵 - André Staltz
Build your own combineLatest operator 🎥 - Kwinten Pisman
📁 Source Code: https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/combineLatest.ts
Last updated