Tap Operator In Angular

The Code Points June 26, 2022 0

In this article, we will learn about the Tap Operator in Angular. The Angular Tap RxJs operator produces an identical observable as the source. It makes no changes to the stream in any way. The tap operator can be used to log a value, debug a stream for correct values, or conduct any other side effects.

Syntax

tap(nextOrObserver: function, error: function, complete: function): Observable

Tap Operator Example

Using the operator, we create an observable in the following example. The pipe is used to connect the tap operator to the source observable, which simply logs the values into the console.

import { Component, VERSION } from "@angular/core";
import { tap } from "rxjs/operators";
import { of } from "rxjs";
 
@Component({
  selector: "my-app",
  template: `
    <h1>Tap Example</h1>
  `,
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  ngOnInit() {
    of(1, 2, 3, 4, 5)
      .pipe(
        tap(val => {
          console.log("Tap " + val);
        })
      )
      .subscribe(val => console.log("at Subscriber " + val));
  }
 
}
 
 
***Console
 
Tap 1
at Subscriber 1
Tap 2
at Subscriber 2
Tap 3
at Subscriber 3
Tap 4
at Subscriber 4
Tap 5
at Subscriber 5

The results will be the same if we simply provide the console.log function to the tap operator.

of(1, 2, 3, 4, 5)
  .pipe(tap(console.log))
  .subscribe(val => console.log("at Subscriber " + val));

Tap makes no changes to the source observable.

Changing the source in the tap operator in any way, as in the example below, will have no effect.

of(1, 2, 3, 4, 5)
  .pipe(
    tap(val => {
      val=val+1
      console.log("Tap " + val);
      return val;
    })
  )
  .subscribe(val => console.log("at Subscriber " + val));

Debugging the Observable

Debugging the Observable for the correct values is one of the use cases for the tap operator.

In the following example, the map operator adds 5 to the source observable. We can use the two tap operators to debug it. Examine the values of the ones before and after it.

of(1, 2, 3, 4, 5)
  .pipe(
    tap(val => {
      console.log("before " +val);
    }),
    map(val => {
      return val + 5;
    }),
    tap(val => {
      console.log("after " +val);
    })
  )
  .subscribe(val => console.log(val));
 
 
 
**Console**
before 1
after 6
6
before 2
after 7
7
before 3
after 8
8

Error & Complete callbacks

The tap operator can also be used to log errors and fulfill callbacks, as seen in the example below:

import { Component, VERSION } from "@angular/core";
import { FormControl, FormGroup } from "@angular/forms";
import { debounce, map, tap } from "rxjs/operators";
import { interval, of, Subscription } from "rxjs";
 
@Component({
  selector: "my-app",
  template: `
    <h1>Tap Example</h1>
 
 
  `,
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  ngOnInit() {
    of(1, 2, 3, 4, 5)
      .pipe(
        tap(val => {
          console.log("Before " + val);
        }),
        map(val => {
          if (val == 3) {
            throw Error;
          }
          return val + 5;
        }),
        tap(
          val => {
            console.log("After " + val);
          },
          err => {
            console.log("Tap Error");
            console.log(err);
          },
          () => {
            console.log("Tap Complete");
          }
        )
      )
      .subscribe(val => console.log(val));
  }
 
  ngOnDestroy() {}
}
 
 
***Console ***
Before 1
After 6
6
Before 2
After 7
7
Before 3
Tap Error
 ƒ Error()
 
ERROR
 ƒ Error()

Conclusion

In this article, we learned what is Tap Operator and how to use it in Angular.

I hope this article helps you and you will like it.👍

If you have any doubt or confusion then free to ask in the comment section.