Are you an Angular Developer? Do you want to use RxJS Operators in your app? This post hopes to a snapshot of some RxJS Operators that you should be known when are working with RxJS observable.

1. map

This operator applies a projection to each value and emits that projection in the returned observable

When to use
map is useful when you have the values in an Observable, but are not in the format you want it to. So you want to re-format the values

Example

const source = Rx.Observable.from([
  {name: 'Joe', age: 30},
  {name: 'Frank', age: 20},
  {name: 'Ryan', age: 50}]
);

//grab each persons name
const example = source.pipe(map(person => person.name));

//output: "Joe","Frank","Ryan"
const subscribe = example.subscribe(
  val => console.log(val)
);

2. mergeMap

Map values from source to inner observable, flatten output…

When to use
We are return­ing an observ­able stream from within an oper­a­tor func­tion and allows for multiple inner subscriptions to be active at a time. Thats pre­cisely why we need to flat­ten using mergeMap.

Notes

  • flatMap is an alias for mergeMap

Example

var outer = Rx.Observable.interval(1000).take(2);

var source = outer.pipe(mergeMap((x) => {
  return Rx.Observable.interval(500).take(3).map(y => `${x}:${y}`)
}));

source.subscribe(d => console.log(d));

/*
source: -0-------1|
          \       \
inner2:    \       0---1---2|  
            \
inner1:      0---1---2|

    mergeMap()

output: -----0:0---0:1-1:0-0:2-1:1---1:2|
*/

3. switchMap

When source emits, switch to and emit values emitted from latest inner observable

When to use
This works perfect for scenarios you are no longer concerned with the response of the previous request when a new input arrives.

Example

var outer = Rx.Observable.interval(1000).take(2);

var source = outer.pipe(switchMap((x) => {
  return Rx.Observable.interval(500).take(3).map(y => `${x}:${y}`)
}));

source.subscribe(d => console.log(d));

/*
source: -0-------1|
          \       \
inner2:    \       0---1---2|  
            \
inner1:      0---1---2|

    switchMap()

output: -----0:0-----1:0---1:1---1:2|
*/

4. combineLatest

Given a group of observables, when one emits also emit latest values from each…

When to use
This operator is best used when you have multiple, long-lived observables that rely on eachother for some calculation or determination

Examle

var streamA = Rx.Observable
    .interval(100 /* ms */)
    .take(3)
    .map(i => `A-${i}` );

var streamB = Rx.Observable
    .interval(50 /* ms */)
    .take(6)
    .map(i => `B-${i}` );

streamA
  .combineLatest(streamB)
  .subscribe( data => console.log(data) );

/*
    One: -----A-----A-----A|
    Two: ---B---B---B---B---B---B|

 Result: ---X-X-X---XX--X-X-X---X|
*/

5. concat

Concatenates multiple Observables together by sequentially emitting their values, one Observable after the other.

When to use
Use this operator when the order is important, for example when you need to send HTTP requests that should be in order.

Example

// Concatenate a timer counting from 0 to 3 with a synchronous sequence from 1 to 10

var timer = Rx.Observable.interval(1000).take(4);
var sequence = Rx.Observable.range(1, 10);
var result = timer.concat(sequence);
result.subscribe(x => console.log(x));

/** Output
timer:     0....1....2....3 |->
sequence:  .................1.2.3.4.5.6.7.8.9.10 |->
           |    |    |    | | | | | | | | | | |
result:    0....1....2....3.1.2.3.4.5.6.7.8.9.10 |->
*/

6. debounceTime

It’s like delay, but passes only the most recent value from each burst of emissions.

When to use
Using this operator when we want to wait about time before emitting current value

Example

const input = document.getElementById('example');

//for every keyup, map to current input value
const example = Rx.Observable
  .fromEvent(input, 'keyup')
  .map(i => i.currentTarget.value);

//wait .5s between keyups to emit current value
//throw away all other values
const debouncedInput = example.debounceTime(500);

//log values
const subscribe = debouncedInput.subscribe(val => {
  console.log(`Debounced Input: ${val}`);
});

/*
Input: h e l l o w o r l d
               \...\\ \\\\
Output:         hello
*/

7. merge

Flattens multiple Observables together by blending their values into one Observable.

When to use
Creates an output Observable which concurrently emits all values from every given input Observable.

Example

//emit every 2.5 seconds
const first = interval(2500);
//emit every 1 second
const second = interval(1000);
//used as instance method
const example = first.pipe(merge(second));
//output: 0,1,0,2....
const subscribe = example.subscribe(val => console.log(val));