Is there an example of when I don't need to handle unsubscribing in the component?

Question

I've become accustomed to unsubscribing to subscriptions I initialize in my components. The recommended approach is to use the takeUntil operator like so:

killSubscriptions: new Subject<any> = new Subject();

ngOnInit(){
   observableThing().pipe(takeUntil(this.killSubscriptions)).subscribe()
}

ngOnDestroy(){
  this.killSubscriptions.next();
  this.killSubscriptions.complete();
}

But then I was implementing a custom dialog with the overlay & portal service the other day, and I came across this block of code in the middle of a method in the Angular Material Library.

// When the dialog backdrop is clicked, we want to close it.
if (config.hasBackdrop) {
  overlayRef.backdropClick().subscribe(() => {
    if (!dialogRef.disableClose) {
      dialogRef.close();
    }
  });
}

How is this subscription cleaned up? My only guess is when the overlayRef is disposed, the subscription is cleaned up. But how?

Are there other times we don't need to handle unsubscription?

Answer 1

Short answer

Because they complete the observer when the OverlayRef is considered going into dispose state.

this._backdropClick.complete();

Angular Material CDK source code

Hope this helps! Going through the source code and trying to understand it is a good and fun way to learn :)

Edit: If you are not sure that your observer will complete then you need to make sure you actively unsubscribe to avoid memory leakage. Your takeUntil pattern is one way to go. You can even change the type from any to void on your Subject.