Use case of Observable .do() operator (rxjs)

45
votes

 Context :

I'm building an angular 2 app (with a Firebase API). I'm using the AngularFire module. I was wondering how I can mix the canActivate method with the AngularFire auth Observable, and I found this post. The answer is to make the canActivate method returns an Observable<boolean> :

canActivate(): Observable<boolean> {
  return this.auth
    .take(1)
    .map((authState: FirebaseAuthState) => !!authState)
    .do(authenticated => {
      if (!authenticated) this.router.navigate(['/login']);
    });
}

It's the first time I see the Observable do operator, and I can't understand what it really does ? The official doc didnt help me, and I didn't found decent examples.

Question:

Can someone bring here some examples of .do() usage ? And difference with .subscribe() ?

2
angularfirebaserxjsobservableangularfire2

2 Answers

66
votes

Update

Now it's pipe( tap(...), ) instead of do()

Original

.do() is to execute code for each event. A difference to .map() is, that the return value of .do() is ignored and doesn't change what value the subscriber receives.

6
votes

Now it's pipe( tap(...), ) instead of do()

const source = of(1, 2, 3, 4);
source.pipe(
  tap(val => console.log('I am tap: ',val)),
  filter(val =>  val > 2),
  map(val => val + 1)).subscribe((val) => {
  console.log('I am subscriber value after filtering: ', val);
});

Output: 

I am tap:  1
I am tap:  2
I am tap:  3
I am subscriber value after filtering:  4
I am tap:  4
I am subscriber value after filtering:  5

*Tap operator doesn't modify anything, you can say that it is just to view the stream.