RxJS tap() Utility Operator

RxJS tap() operator is a utility operator that returns an observable output that is identical to the source observable but performs a side effect for every emission on the source observable.

In other words, you can say that the RxJS tap() operator is used to intercept each emission on the source observable and runs a function but returns an output that is identical to the source observable as long as it doesn't find any error.

This operator is generally used for debugging observables for the correct values or performing other side effects.

Syntax:

Following is the syntax of the RxJS tap() utility operator:

tap<T>(nextOrObserver?: NextObserver<T> | ErrorObserver<T> | CompletionObserver<T> | ((x: T) => void), error?: (e: any) => void, complete?: () => void): MonoTypeOperatorFunction<T>

Parameter Explanation

observer or nextOrObserver: This specifies a normal observer object or a callback for next. This is the same as the source observable. It is an optional argument. Its default value is undefined.
error: It is used to specify the error method if any error occurs in the source. It is also an optional argument. Its default value is undefined.
complete: This is called when the task is complete. It is also an optional argument. Its default value is undefined.

Return value

The RxJS tap() operator's return value is an observable identical to the source observable with a callback function that runs the specified observer or callbacks for each item.

Let us see some examples of the RxJS tap() operator to understand it clearly.

Example 1

import { of } from 'rxjs';
import { tap, filter } from 'rxjs/operators';
let list1 = of(1, 2, 3, 4, 5, 6);
let final_val = list1.pipe(
   tap(x => console.log("From tap() =" + x),
      e => console.log(e),
      () => console.log("Task completed")),
   filter(a => a % 2 === 0)
);
final_val.subscribe(x => console.log("The even number is=" + x));

Output:

After executing the above example, you will see the following result:

Example 2 (Logging with tap)

import { of } from 'rxjs';
import { tap, map } from 'rxjs/operators';
const source = of(1, 2, 3, 4, 5);
// transparently log values from source with 'tap'
const example = source.pipe(
  tap(val => console.log(`BEFORE MAP: ${val}`)),
  map(val => val + 10),
  tap(val => console.log(`AFTER MAP: ${val}`))
);
//'tap' does not transform values
const subscribe = example.subscribe(val => console.log(val));

Output:

After executing the above example, you will see the following result:

Example 3 (Using tap with object)

import { of } from 'rxjs';
import { tap, map } from 'rxjs/operators';
const source = of(1, 2, 3, 4, 5);
// tap also accepts an object map to log next, error, and complete
const example = source
  .pipe(
    map(val => val + 10),
    tap({
      next: val => {
        console.log('on next', val);
      },
      error: error => {
        console.log('on error', error.message);
      },
      complete: () => console.log('on complete')
    })
  )
  .subscribe(val => console.log(val));

Output:

After executing the above example, you will see the following result: