Search⌘ K
AI Features
Home
Courses
The Angular Masterclass

Combination Operators

Explore how to combine multiple Observables using Angular's combination operators such as merge, concat, and concatAll. Understand how these operators help unify data streams from API calls or other sources into a single, manageable Observable for responsive app development.

We'll cover the following...

The first operator we’re going to look at is the merge() operator.

merge operator

The merge operator takes in a series of Observables to create one that can be subscribed to.

This can be useful if we have two Observables that return different data that we want to combine into one Observable. For example, if we have two Observables being returned from two different API calls, we could use the merge operator to combine that returned data into one data source.

Example

Here’s a simple example of the merge operator:

C++
const { mapTo } = require("rxjs/operators");
const { interval, merge } = require("rxjs");
// Create three Observables using a timer
// Returns value after every 1s
const firstTimer = interval(1000);
// Returns value after every 2s
const secondTimer = interval(2000);
// Returns value after every 5s
const thirdTimer = interval(5000);
// Merge all three timer Observables into one data source
const example = merge(
  firstTimer.pipe(mapTo("FIRST!")),
  secondTimer.pipe(mapTo("SECOND!")),
  thirdTimer.pipe(mapTo("THIRD"))
);
// Subscribe to the merged Observable
const subscribe = example.subscribe((val) => console.log(val));
// Unsubscribe from merged observable after 21s
setTimeout(() => {
  subscribe.unsubscribe();
  console.log("21 seconds has been passed");
}, 21000);

Here, we are creating three Observables using the interval() operator, which returns an Observable using a time property. Then, we’re taking these three Observables and using the merge() operator to combine them into one, then subscribing to the result. As each internal Observable fires, we are using the map() operator to emit the constant value (either FIRST!, SECOND!, or THIRD) on the output Observable.

concat operator

Another combination operator is called concat. This operator will take a number of Observables and return a single Observable.

Example

Here’s how this works:

C++
const { of, concat } = require('rxjs');
//emits 1,2,3
const sourceOne = of(1, 2, 3);
//emits 4,5,6
const sourceTwo = of(4, 5, 6);
// emits 7,8,9
const sourceThree = of(7,8,9);
//used as static
const example = concat(sourceOne, sourceTwo, sourceThree);
//output: 1,2,3,4,5,6,7,8,9
const subscribe = example.subscribe(val => console.log(val));

This example creates three source Observables from a list of numbers using the of() operator. Then, it takes these three Observables and concats them into one Observable, which is subscribed to.

concatAll() operator

Another example of a combination Operator is the concatAll() operator.

This operator takes a number of Observables, and as each one completes, it sends out its stream of data. The concatAll() operator takes the result and adds it to the next Observable in its list. This leads to a new Observable that’s created as all its source Observables complete, sending their stream of data one after the other.

Example

This shows the concatAll() operator in action:

C++
const { of, interval } = require("rxjs");
const { map, concatAll } = require("rxjs/operators");
// Emit a value every 2 seconds
const source = interval(2000);
const example = source.pipe(
  // For demonstration, add 10 to and return as observable
  map((val) => of(val + 10)),
  // Merge values from inner observable
  concatAll()
);
//output: 'Example with Basic Observable 10', 'Example with Basic
//Observable 11'...
const subscribe = example.subscribe((val) =>
  console.log("Example with Basic Observable:", val)
);
// Unsubscribe from merge observable after 21s
setTimeout(() => {
  subscribe.unsubscribe();
  console.log("21 seconds has been passed");
}, 21000);