Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@ngneat/until-destroy
Advanced tools
Readme
A neat way to unsubscribe from observables when the component destroyed
@ngneat/until-destroy | Angular |
---|---|
8.x | >= 10.0.5 < 13 |
9.x | >= 13 |
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 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.
@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();
}
}
@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.
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.
}
}
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() {}
}
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 yarn
yarn 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 empty OnDestroy
methods removing.
npx @ngneat/until-destroy-migration --removeOnDestroy
You can remove the package once the migration is done.
@UntilDestroy()
before the @Component()
decorator.overrideComponent
in unit tests remember that it overrides metadata and component definition. Invoke UntilDestroy()(YourComponent);
to reapply the decorator. See here for an example.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!
FAQs
RxJS operator that unsubscribes when Angular component is destroyed
The npm package @ngneat/until-destroy receives a total of 152,371 weekly downloads. As such, @ngneat/until-destroy popularity was classified as popular.
We found that @ngneat/until-destroy demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.