🦁 Unsubscribe For Pros

> A neat way to unsubscribe from observables when the component destroyed


Compatibility with Angular Versions

@ngneat/until-destroy	Angular
8.x	>= 10.0.5 < 13
9.x	>= 13

Table of contents

- Use with Ivy
- Use with Non-Singleton Services
- Use with View Engine (Pre Ivy)
- Use with Any Class
- Migration from View Engine to Ivy
- Potential Pitfalls
- Contributors

Use with Ivy

``bash
npm install @ngneat/until-destroy


Or if you use yarn


yarn add @ngneat/until-destroy
`

`ts
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:

`ts
@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.

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

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

You can set the blackList property if you don't want to unsubscribe from one or more subscriptions.

`ts
@UntilDestroy({ checkProperties: true, blackList: ['subscription1'] })
@Component({})
export class HomeComponent {
// subscription1 will not be unsubscribed upon component destruction
subscription1: Subscription;
// subscription2 will be unsubscribed upon component destruction
subscription2: Subscription;

constructor() {
this.subscription1 = new Subject().subscribe();
this.subscription2 = new Subject().subscribe();
}
}
`

$3

`ts
@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)

`bash
npm install ngx-take-until-destroy


Or if you use yarn


yarn add ngx-take-until-destroy
`

`ts
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.
}
}
`

$3

`ts
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. The script is shipped as a separate package. Run the following command to install it:

`sh
npm i --save-dev @ngneat/until-destroy-migration


Or if you use yarn


yarn add -D @ngneat/until-destroy-migration
`

Then run the following command:

`shell script
npx @ngneat/until-destroy-migration --base my/path
`

base defaults to ./src/app.

You can use the --removeOnDestroy flag for empty OnDestroy methods removing.

`shell script
npx @ngneat/until-destroy-migration --removeOnDestroy
`

You can remove the package once the migration is done.

Potential Pitfalls

- The order of decorators is important, make sure to put @UntilDestroy() before the @Component() decorator.
- When using overrideComponent in unit tests remember that it overrides metadata and component definition. Invoke UntilDestroy()(YourComponent);` to reapply the decorator. See here for an example.

ESLint Rules

- prefer-takeuntil
- no-unsafe-takeuntil

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Netanel Basal 💻 📖 🤔

Artur Androsovych 💻 💡 🤔 🚇

Krzysztof Karol 🖋

Alex Malkevich 💻

Khaled Shaaban 💻

kmathy 💻

Dmitrii Korostelev 💻

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