Map

The Map operator takes an observable source as input. It applies a function to each of the values emitted by one observable, and transforms it into a new value.

The Map operator can be defined using RxJS’s expand method; it applies a function to each input value, and emits the new values. This is equivalent to defining a custom observable by calling .map on an array or an iterable object.

The function then emits the new value to its subscribers and we use a pipe with our map to chain multiple operators together.

Example

srcName$ = from(['John', 'Tom', 'Katy'])

toUpperCase() {

 this.srcName$

  .pipe(map(data => {

   return data.toUpperCase();

  }))

  .subscribe(data => console.log(data))

}

Filter

The Filter Operator in Angular is used to filter the data. We can use it in conjunction with the mapping and you can also pass multiple filtering clauses on Filter Operator.

The Filter Operator is the most used operator in Angular. It takes two arguments. The first argument to the predicate function is received from each value of the source observable. Filter emits only those values that satisfy the argument’s predicate. The second parameter is a zero-based index variable, which will be iterated over in turn for both arguments.

Tap

The Angular Tap RxJS operator emits a similar observable to the original one. The Tap operator performs no manipulation of the stream and is useful for logging values, debugging the flow, or to perform other side effects.

One of the uses for the tap operator is debugging an Observable to ensure it’s emitting correct values.

We also use the tap operator to log errors and complete callbacks.