1

I'm new to Angular and I'm filtering the user with the id same as in the JWT payload.

I can do this in the subscribe() of the Observable like this:

  this.route.data.subscribe((data) => {
      this.users = data.users.filter((u: User) => u.id !== +this.authService.decodedToken.nameid);
  });

I also can do this in the pipe() method like:

this.route.data
  .pipe(map(data => data.users.filter((u: User) => u.id !== +this.authService.decodedToken.nameid)))
  .subscribe((data) => {
    this.users = data;
  });

Resolver code (probably irrelevant to the question):

  resolve(route: ActivatedRouteSnapshot): Observable<User[]> {
        return this.userService.getUsers().pipe(
            catchError(error => {
                this.alertify.error('Problem retrieving data');
                this.router.navigate(['/home']);
                return of(null);
            })
        );
    }

Now why should I use the pipe() method rather than filtering directly in the subscribe() method are there any advantages or disadvantages of using pipe() in this scenario? Which of the two is the conventional Angular way of doing this?

I would think that the pipe() would be a little bit slower, since it first maps and then filters.

sdfsd
  • 1,043
  • 1
  • 8
  • 13
  • 2
    In this case, there's no defference. But what if you wanted to make the code of the component simpler by moving this filtering into the service or the resolver that provides the data? You would have no other choise than using pipe(). – JB Nizet Dec 09 '19 at 22:40
  • The performance should be negligible. Imagine you have multiple subscribers, are you going to filter in each subscription? But as @JBNizet said, your example is too simplistic to see the difference. You shouldn't forget to unsubscribe though (or use takeUntil/first pipe). – s.alem Dec 09 '19 at 22:47
  • 2
    @s.alem unsubscribing from the ActivatedRoute observables is useless. – JB Nizet Dec 09 '19 at 22:49
  • 1
    @JBNizet you are right. I learned something new. Thanks. https://stackoverflow.com/a/41359138/1784230 – s.alem Dec 09 '19 at 22:51

2 Answers2

3

With pipable operators now, you are doing declarative programming. if we do everything in subscribe, there are some pitfalls to it

  • Merging with another observable becomes difficult.
  • What if you want to get value from observable1 and pass it to observable2, will you do mergeMap or subscribe inside another subscription (never do that).
  • All your logic is now inside one function, difficult to read.

When u write pipable operators

  1. Each function performs one specific logic.
  2. Separation of concerns
  3. you will have to subscribe only once (to the end result)
  4. Code looks neat

Look at the example

const obs1$ = of(1,2,3,4,5);
obs1$.pipe(filter(val => val%2 === 0), map(val => val*2).subscribe(finalValue => console.log(value)

writing all this inside subscribe will surly look crappy! hope this helps

Tarun1704
  • 181
  • 1
  • 4
1

It creates an observable that emits the value you want. In Angular we often use the async pipe so we don't have to manage subscriptions so map is useful in creating and observe where the data that comes into the async pipe is the data we want to use in the template

users$ = this.route.data
  .pipe(map(data => data.users.filter((u: User) => u.id !== +this.authService.decodedToken.nameid)));

and use the async pipe

<ng-container *ngIf="users$ | async as users">
  {{ users | json }} users here is updated each time users$ emits a value
</ng-container>

The async pipe manages the subscriptions for us and we don't need to wory about unsubscribing.

This is just the tip of the iceberg with RxJs and pipes. You really should stop learning Angular for a bit a come back once you have a good understanding of the RxJs fundamentals. It will really change the way you build Angular components.

Adrian Brand
  • 20,384
  • 4
  • 39
  • 60