[Angular] Unsubscribe observables on component destroy

Recently I came across a library, the sole purpose of which was to unsubscribe from obersverables when it's component is unsubscribed from. Essentially it is a custom RxJS operator, when using it, you still have to remember to initiate ngOnDestroy() even if the content of which is empty.

This could have been archived via the following simple schema I came accross when reading through the Angular Doc:

  1. Inside the component you wish to trigger unsubscribtions on component destruction, create a subject which is used to deliver the destroy signal to the observable
private onDestroy = new Subject();
  1. For each and every subscription you make inside that component, use the takeUntil operator which are wired to the Subject created in step 1. The code would look something like this
        ...
        .pipe(takeUntil(this.onDestroy))
        .subscribe(res => {
        ...
  1. Initiate onDestroy and publish the destroy signal:
  ngOnDestroy() {
    this.onDestroy.next();
  }

When the destroy signal is broadcasted to the onDestroy Subject, every subscription with listen to it will unsubscribe due to the logic of takeUntil.

The world of Angular I realized is full of wrappers and third-party libraries which if you don't have good understanding will add a lot of redundant technical depth to your project, which makes onboarding new developers very difficult.

By using what is given by the framework itself and adhering to a minimalistic mindset, I belive you can prevent bad fate of the whole project.