Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What are pipe and tap methods in Angular tutorial?

Tags:

angular

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?

like image 862
Ben Rubin Avatar asked Nov 13 '17 23:11

Ben Rubin


People also ask

What does pipe and tap do in Angular?

We use the pipe to chain the tap operator, which just logs the values of the source observable into the console. if we simply pass the console. log function to the tap operator and the results will be same. For Example changing the source any way in the tap operator as in the example below, will have no effect.

What is pipe method in Angular?

Pipes let you combine multiple functions into a single function. The pipe() function takes as its arguments the functions you want to combine, and returns a new function that, when executed, runs the composed functions in sequence.

What is TAP () in RxJS?

RxJS tap() operator is a utility operator that returns an observable output that is identical to the source observable but performs a side effect for every emission on the source observable.

What does tap do in typescript?

The tap operator is designed solely for such side-effects to help you remove side-effects from other operations. For any notification, next, error, or complete, tap will call the appropriate callback you have provided to it, via a function reference, or a partial observer, then pass that notification down the stream.


1 Answers

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

like image 173
Daniel Kucal Avatar answered Sep 26 '22 21:09

Daniel Kucal