What are pipe and tap methods in Angular tutorial?

Angular

Angular Problem Overview


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?

Angular Solutions


Solution 1 - Angular

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().

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionBen RubinView Question on Stackoverflow
Solution 1 - AngularDaniel KucalView Answer on Stackoverflow