Auto Destroy

Problem

When we use RxJS, we have to cancel all subscription objects we create. In angular, we have the possibility to use async pipe. However, in some use cases, we don't have this opportunity and we need manually to unsubscribe each subscription or complete the Observable by using takeUntil.

Although, we have to duplicate the same code over and over, the implementation of this pattern becomes repetitive for each component that uses subscriptions.

Solution

Auto destroy library offers a single autoDestroy operator method. It overrides any existent destroy method to handle automatically subscription cancellation on any observable.

How it works

We can use the autoDestroy operator along with angular component as follow:

export class PostComponent implements OnDestroy {
  constructor(postService: PostService) {
    postService.getPosts()
      .pipe(
        switchMap(...)
        ... other observables
        // to prevent leaks with intermediate observables, this **MUST** be the last operator !!
        autoDestroy(this)
      )
      .subscribe();
  }

  // must be implemented even empty
  ngOnDestroy(): void {}
}

The autoDestroy operator is RxJS specific and not related to Angular. Thus, it can be used with any Observable as follow:

export class AuthorComponent {
  constructor() {
    timer(0, 300)
      .pipe(
        map(next => next * 3),
        filter(next => next % 2 !== 0),
        autoDestroy(this, 'destroy') // default method name is ngOnDestroy
      )
      .subscribe();
  }

  private log(message: string): void {
    console.log(message);
  }

  // original destroy method would be called automatically
  destroy(message: string): void {
    this.log(message);
  }
}

Peer Dependency

The auto destroy pipe depends on:

1. RxJS ^6.3

   • Observable
   • Subject
   • takeUntil

2. Typescript 3.6.5

Publish to npm repo

1. Fix date release in CHANGELOG.md
2. Increment version number in package.json and package-lock.json
3. Run npm run pub then enter the 2FA code
4. Commit, push and create a new github release