# ng-rxjs-take-until-destroy

> A decorator that automatically unsubscribes decorated values on component's 'ngOnDestroy' method's call.

Latest version **3.0.1** (published 2019-09-11) · ISC license · 0 weekly downloads

## Install

```sh
npm install ng-rxjs-take-until-destroy
pnpm add ng-rxjs-take-until-destroy
yarn add ng-rxjs-take-until-destroy
bun add ng-rxjs-take-until-destroy
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.1 |
| Published | 2019-09-11 |
| First published | 2018-01-26 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 10.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10 |
| Author | Daniel Bojarski |
| Maintainers | pgssoft |

## Links

- npm: https://www.npmjs.com/package/ng-rxjs-take-until-destroy
- Repository: https://github.com/dbojarski/ng-rxjs-take-until-destroy
- Homepage: https://github.com/dbojarski/ng-rxjs-take-until-destroy#readme
- Issues: https://github.com/dbojarski/ng-rxjs-take-until-destroy/issues
- npm.io page: https://npm.io/package/ng-rxjs-take-until-destroy

## Recent versions

- 3.0.1 (latest) — 2019-09-11
- 3.0.0 — 2019-09-06
- 2.0.2 — 2019-04-16
- 2.0.1 — 2019-02-28
- 2.0.0 — 2018-12-17
- 1.2.9 — 2018-01-30
- 1.2.8 — 2018-01-30
- 1.2.7 — 2018-01-29
- 1.2.6 — 2018-01-26
- 1.2.5 — 2018-01-26
- 1.2.4 — 2018-01-26
- 1.2.3 — 2018-01-26
- 1.2.2 — 2018-01-26
- 1.2.1 — 2018-01-26
- 1.2.0 — 2018-01-26
- … 20 more at https://npm.io/package/ng-rxjs-take-until-destroy/versions

## README

<b>TakeUntilDestroy</b> is a decorator for Angular that handles unsubscriptions on component destroy. If you have subscriptions that exist
till the component destroy, just define a function or property that returns or is an observable and use this decorator. No triggers, no subscriptions, no 'ngOnDestroy' with just unsubscription purpose.

# ng-rxjs-take-until-destroy
A decorator that automatically unsubscribes observables returned by decorated values on Angular component's 'ngOnDestroy' call.

# Installation
`npm i ng-rxjs-take-until-destroy`

# Usage
```javascript
class SomeClass implements OnInit {
  @TakeUntilDestroy obs$: BehaviorSubject<number> = new BehaviorSubject(5);
  
  constructor(private serviceA: ServiceA,
              private serviceB: ServiceB) {
  }
  
  ngOnInit() {
    this.getStreamA().subscribe();
    this.getStreamB().subscribe();
  }
  
  @TakeUntilDestroy
  private getStreamA(): Observable<StreamAType> {
    return this.serviceA.getStreamA();
  }
  
  @TakeUntilDestroy
  private getStreamB(): Observable<StreamBType> {
    return this.serviceB.getStreamB();
  }
}
```

# What's going on under the hood?
The decorator...
1. Adds once a trigger which is a Subject.
2. Modified decorated function or property calling rxjs' 'takeUntil' function on returned value.
3. Adds 'ngOnDestroy' function to the component or extends already existing.
4. Performs 'next' and 'complete' on earlier added trigger on 'ngOnDestroy' call.

in fact the above component without 'TakeUntilDestroy' decorator would be looking like

```javascript
class SomeClass implements OnInit, OnDestroy {
  obs$: BehaviorSubject<number> = new BehaviorSubject(5);
  private trigger: Subject<any> = new Subject();
  
  constructor(private serviceA: ServiceA,
              private serviceB: ServiceB) {
  }
  
  ngOnInit() {
    this.obs$
      .takeUntil(this.trigger)
      .subscribe();
      
    this.getStreamA()
      .takeUntil(this.trigger)
      .subscribe();
      
    this.getStreamB()
      .takeUntil(this.trigger)
      .subscribe();
  }
  
  ngOnDestroy() {
    this.trigger.next();
    this.trigger.complete();
  }
}
```
# Important
Using Angular CLI with AOT compilation, the ngOnDestroy method has to be implemented directly to component (even if it means to make an empty method). Otherwise ```TakeUntilDestroy``` decorator won't be able to create it and modify itself.

```javascript
class SomeClass implements OnInit {
  constructor(private serviceA: ServiceA,
              private serviceB: ServiceB) {
  }
  
  ngOnInit() {
    this.getStreamA().subscribe();
    this.getStreamB().subscribe();
  }
  
  ngOnDestroy() {}
  
  @TakeUntilDestroy
  private getStreamA(): Observable<StreamAType> {
    return this.serviceA.getStreamA();
  }
}
```

---
_Source: https://npm.io/package/ng-rxjs-take-until-destroy · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._