combineLatest has a name that says it all: The operator combines the latest values from two or more observables into one observable.
This marble diagram is the perfect illustration of that behavior (click on the image to access an interactive version):
There are several possible use cases for that operator. The most common usage is filtering information by combining different sources, as illustrated in this tutorial on dynamic filtering with RxJs and Angular forms, which implements the equivalent of an auto-complete text input that displays new suggestions every time the user types new characters in.
What we get out of combineLatest is an array of all the latest values emitted by the combined observables. For instance, if we subscribe to combineLatest(obs1, obs2, obs3), the data we get is an array that contains [lastValueFromObs1, lastValueFromObs2, lastValueFromObs3]. The order of the data in the array matches the order in which we pass the observables to combineLatest, and that array of values will be emitted again every time one of the observables emits again.
A common gotcha of combineLatest is that the operator waits for all observable sources to emit at least one value before returning something, so it can be helpful to use it alongside the startWith operator, as illustrated in this example from our earlier tutorial.
Note: The operator is going to be renamed to combineLatestWith in RxJs 8+.
