20 RxJS Operators

You Absolutely Need to Know

www.ng-conf.org

combineLatest
Combines the values from all supplied observables. Note the previous pipeable operator is
deprecated with the suggestion of using the static version. Use this when you need to
support one observable being dependent upon another.

1 obs$.pipe(combineLatest(obs2$)); // [obs$Value, latest obs2$Value]

concat
Emit values from provided observable after the first observable completes. Use this when
you need to handle multiple sets of data in the same way in order.

1 obs$.pipe(concat(obs2$));
2 // all values from obs$ then values from obs2$

concatMap
Allows for emitting values from an operation that creates a separate observable, it will emit
values from the created observable. Original values will be emitted in order after each of their
created observables have completed. Use this when you need to flatten an observable of
observables when you want to handle each parent emit after the child observable completes.

1 obs$.pipe( // 0
2 concatMap(x => {
3 return getLetter(x); // Observable which emits one value (‘a’)
4 }) // ‘a’

count
Tells how many values were emitted, when the stream completes. Use this when you need
to find out how many items were in an observable stream. This example shows an operation
via count that doesn't effect the values.

1 obs$.pipe( count() ); // grab the count

Looking to step up your Angular skills?

Check out all our tips and tricks on:
www.ng-conf.org.
 20 RxJS Operators
You Absolutely Need to Know
www.ng-conf.org

filter
Allows you to prevent values from being emitted based upon a supplied function. Use this
when you want to control what values are emitted for further processing.

1 obs$.pipe(
2 filter(x => {
3 return x % 2 === 0; // Only allow even numbers through.
4 })
5 );

first
Only emit the first value, after the first value the observable will complete. Use this if you only
care about the first value.

1 obs$.pipe(first());

last
Only emit the last value prior to completion. Use this if you only care about the last value.

1 obs$.pipe(last());

startWith
Provides the ability to specify a value which will be the first value emitted by the observable.
Use this to seed your observable with a specific value.

1 obs$.pipe(startWith(1000));

Looking to step up your Angular skills?

Check out all our tips and tricks on:
www.ng-conf.org.
 20 RxJS Operators
You Absolutely Need to Know
www.ng-conf.org

debounceTime
Adds a time buffer to only emit when no other values have been emitted in the timeframe
specified. Use this to limit longer running processes that can be requested multiple times
when you only care about the most recent value. i.e. making HTTP calls for autocomplete

1 obs$.pipe(debounceTime(250));

distinct
A given value is not emitted more than once. Use this when you do not want to reprocess
the same information more than once.

1 obs$.pipe(distinct());

distinctUntilChanged
Emits only when the current value is different than the previous value. Use this when you are
only interested in doing something when there is a new value. i.e. don’t validate a textbox
value if the user pasted the same value over itself.

1 obs$.pipe(distinctUntilChanged());

scan
Allows for accumulation of data as values emit, like a running total for numbers. The
accumulated value will emit when the source observable emits. Use this to aggregate data
as values emit.
1 obs$.pipe(
2 scan((acc, x) => {
3 return acc + x;
4 }, seed)
5 );

Looking to step up your Angular skills?

Check out all our tips and tricks on:
www.ng-conf.org.
 20 RxJS Operators
You Absolutely Need to Know
www.ng-conf.org

switchMap
Allows for emitting values from an operation that creates a separate observable, it will emit
values from the created observable. Values from the created observable will be emitted only
from
1 the most recent emitted source observable. Use this when you only care about the
most recent parent emit value’s child values, because a new parent emit will cancel the
previous child observable.
1 obs$.pipe(
2 switchMap(x => {
3 return getRemoteData(x);
4 })
5 );

take
Allows specification of the number of emits that occur before the observable completes. Use
this when you want to limit the number of values.
1 obs$.pipe(take(2)); // will emit the first two values and then complete
2 );

takeUntil
Allows specifying when an observable will complete based upon the emission of separate
observable. Use this when you want one event to signal the completion of another. i.e. only
take mouse move events until a mouse up event.
1 obs$.pipe(takeUntil(otherObs$));

zip
Pairs values from multiple observables into a single array value. When one of the “zipped”
observable completes, the resulting observable completes. Use this when when the values of
multiple observables are matched and their values are needed together.

1 obs$.pipe(zip(obs2$));

Looking to step up your Angular skills?

Check out all our tips and tricks on:
www.ng-conf.org.
 20 RxJS Operators
You Absolutely Need to Know
www.ng-conf.org

tap
Allows for side-effects based upon the source observable, but does not have an effect on the
values being emitted. Use this to use the emit of an observable to trigger something outside
the scope of the observable. A common use case is to place debugging statements such as
logging.
1 obs$.pipe(
2 tap(value => {
3 log(`my value ${value}`);
4 })
5 );

withLatestFrom
Allows “pulling” latest value from another observable when the source observable emits. The
source value is combined with the other observable in an array. Use this when you need
information from another observable, but may not care when that observable emits.
1 obs$.pipe(withLatestFrom(obs2$));

map
Allows the values to be modified to a new value. Use this when you want to change values
being emitted.
1 obs$.pipe(
2 map(x => {
3 return x * 2;
4 })
5 );

endWith
Allows you to specify the last value to be emitted before completion.

1 obs$.pipe(endWith(1000));

Looking to step up your Angular skills?

Check out all our tips and tricks on:
www.ng-conf.org.