LiveLoveApp logo

Pipeable Operators

Pipeable Operators

  • Transform the source observable and return a new observable
  • They do not change the source observable
  • They do not do anything until the transformed observable is subscribed to

The tap Operator

  • Listens to notifications from the source observable
  • Calls your callback function for each notification
  • Great for logging, introspection, and side effects
    (value) => console.log(value),
    (error) => console.error(error),
    () => console.log('Complete')

The map Operator

  • Equivalent to Array#map()
  • Takes each item emitted by the source observable and maps it into a new value
source$.pipe(map((value) => value * 2));

Combining Pipeable Operators

  • The magic of observable$.pipe(...) is that it can accept multiple operators
  • Use .pipe(...) to setup a pipeline of transformations on a source observable
  tap((value) => console.log('Before Map:', value)),
  map((value) => value * 2),
  tap((value) => console.log('After Map:', value))