Top 9 commonly used rxjs operators in angular

map() Operator is most commonly used operator while using Rxjs. it is used to to transform the each value emitted by the source observable. simply it creates new observable after manipulating the each items of source observable.

//emit (1,2,3,4,5)
const source = from([1, 2, 3, 4, 5]);
//add 10 to each value
const example = source.pipe(map(val => val + 10));
//output: 11,12,13,14,15
const subscribe = example.subscribe(val => console.log(val));

The best part of debounceTime() is that within the given time span if a new value arrives then the previous pending value gets dropped so we only get the latest value emitted by the source observable.

const searchBox = document.getElementById('search');
const keyup$ = fromEvent(searchBox, 'keyup');
// wait .5s between keyups to emit current value
keyup$
.pipe(
map((i: any) => i.currentTarget.value),
debounceTime(500)
)
.subscribe(console.log);

With this operator we can use debounceTime() to give it some time to get the distinct value for search bar kind's of functionalities. debounceTime() and distinctUnitChanged() makes search bar more productive. These both operators return an observable.
const source$ = from([1, 1, 2, 2, 3, 3]);

source$
.pipe(distinctUntilChanged())
// output: 1,2,3
.subscribe(console.log);

ThrottleTime operator can be used. it seems similar to debounceTime operator where it is also make delay for the subscriptions but debounceTime() is only emits the last value emitted in source observable and throttleTime() picks the latest value emitted in the source observable.

// RxJS v6+
import { interval } from 'rxjs';
import { throttleTime } from 'rxjs/operators';

const source = interval(1000);
const example = source.pipe(throttleTime(5000));
// output: 0...6...12

forkJoin() operator waits for all observables to be completed then it only emits the last value from each observable Remember if any of the observable does not complete then the forkJoin() will never complete.
forkJoin(
// as of RxJS 6.5+ we can use a dictionary of sources
{
google: ajax.getJSON('https://api.github.com/users/google'),
microsoft: ajax.getJSON('https://api.github.com/users/microsoft'),
users: ajax.getJSON('https://api.github.com/users')
}) .subscribe(console.log);

Pluck operator is used to pluck a property or value and then return in subscription. pluck is useful when you don't want unnecessary in the stream and you can pluck them in the on going execution.
const source = from([
{ name: 'Joe', age: 30, job: { title: 'Developer', language: 'JavaScript' } },
{ name: 'Sarah', age: 35 }
]);
const example = source.pipe(pluck('job', 'title'));
const subscribe = example.subscribe(val => console.log(val));

catchError operator is used to handle errors when we have sequence of source observables. this operator take cares to return error or new observable in case of catching errors on the source observable.
of(1, 2, 3, 4, 5).pipe(
map(n => {
if (n === 4) {
throw 'four!';
}
return n;
}),
catchError(err => of('I', 'II', 'III', 'IV', 'V')),
)
.subscribe(x => console.log(x));

Merge map is often get used when the requirement is to merge response from two observables.

const letters = of('a', 'b', 'c');
const result = letters.pipe(
mergeMap(x => interval(1000).pipe(map(i => x+i))),
);
result.subscribe(x => console.log(x));

Combine latest operator is used to execute multiple observable at once , it only emits the latest value from each source observable (does not like forkJoin() operator).
const One$ = timer(1000, 4000);
const Two$ = timer(2000, 4000);
const Three$ = timer(3000, 4000);
combineLatest(One$, Two$, Three$).subscribe(
([timerValOne, timerValTwo, timerValThree]) => {
console.log(
One Latest: ${timerValOne},
Two Latest: ${timerValTwo},
Three Latest: ${timerValThree});
}
);