When to use tap the operator in Angular?



RxJS (Reactive Extensions for JavaScript) is a library for reactive programming using observables that makes it easier to compose asynchronous or callback-based code. See (RxJS Docs).
Angular uses RxJS heavily in their framework. Angular provides a lot of rxjs operator for making developer life easy one of them is tap previously known as do.
Yow can use tap the operator in the following scenario (there could be more)
  • Debugging
  • Making side effect /Call functions without breaking the stream
  • For Debugging (Example is taken from learnrxjs.io.
// RxJS v6+
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
//output: 11...12...13...14...15
const subscribe = example.subscribe(val => console.log(val));
  • Call function
saveToLocalStorage(data){
  localStorage.setItem('dataSource', data);
 }
 const source = of(1, 2, 3, 4, 5);
const example = source.pipe(
  tap(val => this.saveToLocalStorage),
  map(val => val + 10),
 );
 ``
Next Post Previous Post
No Comment
Add Comment
comment url