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... [Read Full]
markdown guide
 

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?

 

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() ?

 

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.

 

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

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 ;)

awesome, thanks!

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

ngOnDestroy() {
    this.onDestroy$.next(true);
    this.onDestroy$.unsubscribe();
  }
ngOnInit() {
   this.source$.pipe(takeUntil(onDestroy$)).subscribe()
}

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

CHeers!

 

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.

code of conduct - report abuse