Map, Filter and Tap Operator

By Nisar
Published in Angular
August 12, 2021
1 min read


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.


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

toUpperCase() {


  .pipe(map(data => {

   return data.toUpperCase();


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



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.


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.



Product Designer

Sed commodo, est quis maximus fermentum, massa ipsum euismod neque, in varius risus tellus quis lacus. Sed ac bibendum odio.


Product research

Social Media


Related Posts

Angular Template-driven forms
August 12, 2021
1 min
© 2021, All Rights Reserved.

Quick Links

Advertise with usAbout UsContact Us

Social Media