Angular: Proper time to unsubscribe

Question

When using web services, when is the best time to unsubscribe? In my code I have been doing this

tempFunction() {
    const temp = this.myService.getById(id).sub         


        

Answer 1

When you unsubscribe depends on what the subscription is and how you actually use it. In your example, you are calling .unsubscribe when the Observable completes. You don't need to do this since when the Observable has completed it will no longer emit. Instead you need to unsubscribe if the Observable will continue to emit after you may not need it anymore e.g. when navigating away from your component. That is why you see ngOnDestroy used for disposing of subscriptions.

Generally you want to avoid calling .unsubscribe. See: https://medium.com/@benlesh/rxjs-dont-unsubscribe-6753ed4fda87

There are other ways to handle subscriptions such as using the take methods. Angular also has the very powerful async pipe that allows you to use Observables in templates and handles unsubscribing for you.

Just to recap with some examples:

// No need to unsubscribe here. Http Observables only emit once
this.serviceUsingHttp.get().subscribe(useResponse);

// Allows you to call `.unsubscribe` in case the subscription wasn't created properly
events = new Subscription();
ngOnInit() {
  this.events = fromEvent(document, 'someEvent').subscribe(useEvent);
}
ngOnDestroy() {
  this.events.unsubscribe();
}

destroyed$ = new Subject();
ngOnInit() {
  fromEvent(document, 'resize').pipe(takeUntil(this.destroyed$)).subscribe(useResize);
  fromEvent(document, 'scroll').pipe(takeUntil(this.destroyed$)).subscribe(useScroll);
  fromEvent(document, 'change').pipe(takeUntil(this.destroyed$)).subscribe(useChange);
}
ngOnDestroy() {
  // Complete all of the event observables at once.
  this.destroyed$.next(true);
  this.destroyed$.complete();
}