183

I'm following the tutorial at https://angular.io, and I'm having trouble finding documentation; specifically for the methods pipe and tap. I can't find anything on https://angular.io or http://reactivex.io/rxjs/.

My understanding is that pipe and tap are both methods of Observable, which is being imported from RxJS, correct? What are they supposed to do?

Are these methods part of Angular? What do these two methods do?

1
  • 76
    I find it strange when users ask proper questions, receive a proper answer, and yet for the mods are clueless what OP is asking :D - why the hell is this "off-topic"? Commented Jan 29, 2019 at 14:49

1 Answer 1

165

You are right, the documentation lacks of those methods. However when I dug into rxjs repository, I found nice comments about tap (too long to paste here) and pipe operators:

  /**
   * Used to stitch together functional operators into a chain.
   * @method pipe
   * @return {Observable} the Observable result of all of the operators having
   * been called in the order they were passed in.
   *
   * @example
   *
   * import { map, filter, scan } from 'rxjs/operators';
   *
   * Rx.Observable.interval(1000)
   *   .pipe(
   *     filter(x => x % 2 === 0),
   *     map(x => x + x),
   *     scan((acc, x) => acc + x)
   *   )
   *   .subscribe(x => console.log(x))
   */

In brief:

Pipe: Used to stitch together functional operators into a chain. Before we could just do observable.filter().map().scan(), but since every RxJS operator is a standalone function rather than an Observable's method, we need pipe() to make a chain of those operators (see example above).

Tap: Can perform side effects with observed data but does not modify the stream in any way. Formerly called do(). You can think of it as if observable was an array over time, then tap() would be an equivalent to Array.forEach().

9
  • 6
    Thank you for the answer and the links. Part of my problem is that I'm new to Angular, and I'm not sure which methods are part of core JavaScript or Node.js or RxJS or Angular. Your answer helped me to clarify that. Thank you.
    – Ben Rubin
    Commented Nov 14, 2017 at 0:57
  • 4
    @BenRubin I would recommend that you start by learning native JS properly before starting to learn the tools. It will make it much easier to understand the tools and what it actually does (and to know what parts is native vs the tool). Commented Nov 14, 2017 at 6:44
  • 27
    since 5.5 and the introduction of pipeable (once known as lettable) operators, do as been renamed as tap... In short, it's a mess. github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md
    – Luca
    Commented Mar 12, 2018 at 14:22
  • 3
    filter works just like Array.filter - keeps only values fulfilling the rule (in this case divisible by 2); map (again like Array.map) changes every value (in this case adds it to itself); scan is most interesting and here is a nice explanation: learnrxjs.io/operators/transformation/scan.html Commented Aug 17, 2018 at 8:18
  • 1
    looks like scan is reduce
    – latj
    Commented Aug 28, 2018 at 19:55

Not the answer you're looking for? Browse other questions tagged or ask your own question.