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

source$.pipe(
  tap(
    (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

source$.pipe(
  tap((value) => console.log('Before Map:', value)),
  map((value) => value * 2),
  tap((value) => console.log('After Map:', value))
);