DEV Community

The Ultimate Answer To The Very Common Angular Question: subscribe() vs | async Pipe

Tomas Trajan 🇨🇭 on October 07, 2018

Most of the popular Angular state management libraries like NgRx expose application state in a form of a stream of state objects. This is usually i...

Read full post

Stephen Chiang • Oct 7 '18

I was thinking...if I wanted to do some operation in a component based on a boolean stream, I am forced to subscribe so that I can call the the operation when the right boolean value is received right?

I would have to go from:

this.foo$ = this.store.pipe(select(foo));

to:

this.foo$ = this.store.select(state => {
      this.foo = state.store.foo;
      if (this.foo) {
        this.operationOnFoo();
      }
    });

Is this a correct assumption?

Tomas Trajan 🇨🇭 • Oct 7 '18

You can also do this.fooExists$ = this.store.pipe(select(foo), filter(foo => !!foo)); then you can also this.fooExists$.subscribe(operation). But why do you have to call something for every foo? Can't it be implemented using ngrx @Effect() ?

Stephen Chiang • Oct 7 '18

I only need it to happen once and only one component is listening for it... Sort of like this component telling a sibling component that it is ready to do something... So I thought an effect would be Overkill, plus I'm not calling a new Action, the operation happens internally to the listening component.

Stephen Chiang • Oct 8 '18

Would i need to manually unsubscribe in OnDestroy if I did it this way (not @Effect) as you have described?

Tomas Trajan 🇨🇭 • Oct 8 '18

Yes, whenever you do explicit .subscribe() call, you are automatically responsible to call .unsubscribe(). Even better would be to use .pipe(takeUntil(onDestroy$)) which is declarative ;)

Stephen Chiang • Oct 8 '18 • Edited

awesome, thanks!

so then I would also need to do this, right?

ngOnDestroy() {
    this.onDestroy$.next(true);
    this.onDestroy$.unsubscribe();
  }

Tomas Trajan 🇨🇭 • Oct 8 '18 • Edited

ngOnInit() {
   this.source$.pipe(takeUntil(onDestroy$)).subscribe()
}

ngOnDestroy() {
    this.onDestroy$.next(true);
    this.onDestroy$.complete()
}

CHeers!

Stephen Chiang • Oct 7 '18 • Edited

I have been using subscribe in ngOnInit and creating a subscription manager to unsub in OnDestroy which was ok because of couldn't definitely find out which way was better, but then just before this article came out I learned that using the async pipe handled the unsub for me, and now one learned it's also more performant so now I'm trying to use that as much as possible these days. Thanks for this article! I'm excited about the growing presence of angular articles here on Dev.