@ngneat/until-destroy

Automatic RxJS subscription cleanup for Angular components — no more manual unsubscribe logic in ngOnDestroy.

@ngneat/until-destroy

Angular

Automatic RxJS subscription cleanup for Angular components — no more manual unsubscribe logic in ngOnDestroy.

npm GitHub Docs

Fit

Bundle (gzip)

1.6 kB

3.7 kB raw

Install size includes transitive dependencies. Bundle size is gzipped browser payload.

Freshness

The Problem

Every RxJS subscription in an Angular component must be explicitly unsubscribed in ngOnDestroy, or it leaks memory. Maintaining Subscription arrays or Subject subjects for this is verbose boilerplate that clutters every component.

What It Does

The @UntilDestroy() decorator combined with the untilDestroyed(this) operator automatically completes all subscriptions when the component is destroyed — no ngOnDestroy method, no subscription tracking arrays required.

Installation

bash

npm install @ngneat/until-destroy

Usage Example

typescript

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

@UntilDestroy()
@Component({ selector: 'app-timer', template: '{{ count }}' })
export class TimerComponent implements OnInit {
  count = 0;

  ngOnInit() {
    interval(1000)
      .pipe(untilDestroyed(this))
      .subscribe(() => this.count++);
    // Automatically unsubscribed when component is destroyed
  }
}

Related packages

@angular/cdkAngular

Angular Component Dev Kit — a set of behavior primitives for building accessible, high-quality UI components without prescribing any visual style.

@angular/materialAngular

Official Material Design component library for Angular — 30+ accessible, themeable UI components built for Angular's ecosystem.

@ng-bootstrap/ng-bootstrapAngular

Angular widgets built from scratch using Bootstrap CSS — no jQuery, no Popper.js, just pure Angular components.

ng-zorro-antdAngular

Enterprise-grade UI component library for Angular based on Ant Design — 60+ production-ready components with a polished design system.

@ngrx/storeAngular

Reactive state management for Angular apps built on RxJS — a predictable, unidirectional data flow inspired by Redux.