@ngneat/until-destroy

What is @ngneat/until-destroy?

@ngneat/until-destroy is an Angular utility that helps manage the lifecycle of subscriptions and other resources in Angular components and services. It automatically unsubscribes from observables when the component or service is destroyed, preventing memory leaks and reducing boilerplate code.

What are @ngneat/until-destroy's main functionalities?

Automatic Unsubscription

This feature allows automatic unsubscription from observables when the component is destroyed. The `untilDestroyed` operator is used to bind the observable to the component's lifecycle.

import { Component } from '@angular/core';
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
import { interval } from 'rxjs';

@UntilDestroy()
@Component({
  selector: 'app-example',
  template: '<p>Example works!</p>'
})
export class ExampleComponent {
  constructor() {
    interval(1000)
      .pipe(untilDestroyed(this))
      .subscribe(val => console.log(val));
  }
}

Service Support

This feature extends the automatic unsubscription functionality to services. The `untilDestroyed` operator can be used in services to manage subscriptions and other resources.

import { Injectable } from '@angular/core';
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
import { interval } from 'rxjs';

@UntilDestroy()
@Injectable({
  providedIn: 'root'
})
export class ExampleService {
  constructor() {
    interval(1000)
      .pipe(untilDestroyed(this))
      .subscribe(val => console.log(val));
  }
}

Directive Support

This feature allows the use of `untilDestroyed` in directives, providing the same automatic unsubscription functionality as in components and services.

import { Directive, OnDestroy } from '@angular/core';
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
import { interval } from 'rxjs';

@UntilDestroy()
@Directive({
  selector: '[appExample]'
})
export class ExampleDirective implements OnDestroy {
  constructor() {
    interval(1000)
      .pipe(untilDestroyed(this))
      .subscribe(val => console.log(val));
  }

  ngOnDestroy() {
    // Custom cleanup logic if needed
  }
}

Other packages similar to @ngneat/until-destroy

ngx-take-until-destroy

ngx-take-until-destroy is another Angular utility for managing subscriptions. It provides a similar functionality to @ngneat/until-destroy by using a `takeUntilDestroy` operator to handle unsubscriptions. However, @ngneat/until-destroy offers a more modern and streamlined API.

take-until-destroy

take-until-destroy is a lightweight library that helps manage subscriptions in Angular components. It uses a `takeUntil` operator to unsubscribe from observables. While it provides similar functionality, @ngneat/until-destroy offers a more comprehensive and integrated solution.

README

🦁 Unsubscribe For Pros

A neat way to unsubscribe from observables when the component destroyed

Use with Ivy

npm install @ngneat/until-destroy
# Or if you use yarn
yarn add @ngneat/until-destroy

import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';

@UntilDestroy()
@Component({})
export class InboxComponent {
  ngOnInit() {
    interval(1000)
      .pipe(untilDestroyed(this))
      .subscribe();
  }
}

You can set the checkProperties option to true if you want to unsubscribe from subscriptions properties automatically:

@UntilDestroy({ checkProperties: true })
@Component({})
export class HomeComponent {
  // We'll dispose it on destroy
  subscription = fromEvent(document, 'mousemove').subscribe();
}

You can set the arrayName property if you want to unsubscribe from each subscription in the specified array.

@UntilDestroy({ arrayName: 'subscriptions' })
@Component({})
export class HomeComponent {
  subscriptions = [
    fromEvent(document, 'click').subscribe(),
    fromEvent(document, 'mousemove').subscribe()
  ];

  // You can still use the opertator
  ngOnInit() {
    interval(1000).pipe(untilDestroyed(this));
  }
}

Use with Non-Singleton Services

@UntilDestroy()
@Injectable()
export class InboxService {
  constructor() {
    interval(1000)
      .pipe(untilDestroyed(this))
      .subscribe();
  }
}

@Component({
  providers: [InboxService]
})
export class InboxComponent {
  constructor(inboxService: InboxService) {}
}

All options, described above, are also applicable to providers.

Use with View Engine (Pre Ivy)

npm install ngx-take-until-destroy
# Or if you use yarn
yarn add ngx-take-until-destroy

import { untilDestroyed } from 'ngx-take-until-destroy';

@Component({})
export class InboxComponent implements OnDestroy {
  ngOnInit() {
    interval(1000)
      .pipe(untilDestroyed(this))
      .subscribe(val => console.log(val));
  }

  // This method must be present, even if empty.
  ngOnDestroy() {
    // To protect you, we'll throw an error if it doesn't exist.
  }
}

Use with Any Class

import { untilDestroyed } from 'ngx-take-until-destroy';

export class Widget {
  constructor() {
    interval(1000)
      .pipe(untilDestroyed(this, 'destroy'))
      .subscribe(console.log);
  }

  // The name needs to be the same as the second parameter
  destroy() {}
}

Migration from View Engine to Ivy

To make it easier for you to migrate, we've built a script that will update the imports path, and add the decorator for you. You need to run it manually on your project.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Netanel Basal 💻 📖 🤔

Artur Androsovych 💻 💡 🤔 🚇

Krzysztof Karol 🖋

Alex Malkevich 💻

Khaled Shaaban 💻

kmathy 💻

This project follows the all-contributors specification. Contributions of any kind welcome!