Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 222 Commits
.github		.github
.husky		.husky
apps		apps
libs		libs
.all-contributorsrc		.all-contributorsrc
.commitlintrc.json		.commitlintrc.json
.eslintignore		.eslintignore
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
.npmrc		.npmrc
.nvmrc		.nvmrc
.prettierignore		.prettierignore
CHANGELOG.md		CHANGELOG.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
jest.config.ts		jest.config.ts
jest.preset.js		jest.preset.js
nx.json		nx.json
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
tsconfig.base.json		tsconfig.base.json

Repository files navigation

🦁 Unsubscribe For Pros

A neat way to unsubscribe from observables when the component destroyed

Sponsoring ngneat

Sponsorships aid in the continued development and maintenance of ngneat libraries. Consider asking your company to sponsor ngneat as its core to their business and application development.

Gold Sponsors

Elevate your support by becoming a Gold Sponsor and have your logo prominently featured on our README in the top 5 repositories.

Silver Sponsors

Boost your backing by becoming a Gold Sponsor and enjoy the spotlight with your logo prominently showcased in the top 3 repositories on our README.

Bronze Sponsors

Become a bronze sponsor and get your logo on our README on GitHub.

Compatibility with Angular Versions

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

Use with Ivy

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

import{UntilDestroy,untilDestroyed}from'@ngneat/until-destroy';@UntilDestroy()@Component({})exportclassInboxComponent{ngOnInit(){interval(1000).pipe(untilDestroyed(this)).subscribe();}}

You can set thecheckProperties option totrue if you want to unsubscribe from subscriptions properties automatically:

@UntilDestroy({checkProperties:true})@Component({})exportclassHomeComponent{// We'll dispose it on destroysubscription=fromEvent(document,'mousemove').subscribe();}

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

@UntilDestroy({arrayName:'subscriptions'})@Component({})exportclassHomeComponent{subscriptions=[fromEvent(document,'click').subscribe(),fromEvent(document,'mousemove').subscribe(),];// You can still use the operatorngOnInit(){interval(1000).pipe(untilDestroyed(this));}}

You can set theblackList property if youdon't want to unsubscribe from one or more subscriptions.

@UntilDestroy({checkProperties:true,blackList:['subscription1']})@Component({})exportclassHomeComponent{// subscription1 will not be unsubscribed upon component destructionsubscription1:Subscription;// subscription2 will be unsubscribed upon component destructionsubscription2:Subscription;constructor(){this.subscription1=newSubject().subscribe();this.subscription2=newSubject().subscribe();}}

Use with Non-Singleton Services

@UntilDestroy()@Injectable()exportclassInboxService{constructor(){interval(1000).pipe(untilDestroyed(this)).subscribe();}}@Component({providers:[InboxService],})exportclassInboxComponent{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 yarnyarn add ngx-take-until-destroy

import{untilDestroyed}from'ngx-take-until-destroy';@Component({})exportclassInboxComponentimplementsOnDestroy{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';exportclassWidget{constructor(){interval(1000).pipe(untilDestroyed(this,'destroy')).subscribe(console.log);}// The name needs to be the same as the second parameterdestroy(){}}

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:

npm i --save-dev @ngneat/until-destroy-migration# Or if you use yarnyarn add -D @ngneat/until-destroy-migration

Then run the following command:

npx @ngneat/until-destroy-migration --base my/path

base defaults to./src/app.

You can use the--removeOnDestroy flag for emptyOnDestroy methods removing.

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 usingoverrideComponent in unit tests remember that it overrides metadata and component definition. InvokeUntilDestroy()(YourComponent); to reapply the decorator. Seehere for an example.