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.

Example

import { from } from 'rxjs'
import { filter } from 'rxjs/operators'

const numbers$ = from([1, 2, 3, 4, 5])

numbers$
  .pipe(
    // Only allow even numbers to pass through
    filter(num => num % 2 === 0)
  )
  .subscribe(evenNum => console.log(evenNum)) // Outputs: 2, 4

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.

Example

import { of } from 'rxjs'
import { tap } from 'rxjs/operators'

const names$ = of('Alice', 'Bob', 'Charlie')

names$
  .pipe(
    // Log each name, but don't alter them
    tap(name => console.log('Received name:', name))
  )
  .subscribe(name => console.log('Subscribed to name:', name))

// Output:
// Received name: Alice
// Subscribed to name: Alice
// Received name: Bob
// Subscribed to name: Bob
// Received name: Charlie
// Subscribed to name: Charlie

Conclusion

In Angular’s reactive programming paradigm, RxJS operators play a pivotal role in shaping and managing data streams. The ’map’ operator empowers developers to transform each value emitted by an observable, creating flexibility in how we handle and process data. On the other hand, the ’filter’ operator offers precision, allowing us to selectively emit values that fulfill specific criteria, thereby refining the data we work with. Meanwhile, the ’tap’ operator serves as a watchdog, providing insights without interfering with the data flow. It proves invaluable for debugging and monitoring purposes, ensuring the integrity of our streams. As we harness the capabilities of these operators, we gain a greater degree of control and clarity over our asynchronous operations, making our Angular applications more robust and maintainable.