Angular Destroyref
- 180 installs
- 6 repo stars
- Updated April 4, 2026
- oguzhan18/angular-ecosystem-skills
Register teardown callbacks with DestroyRef to unsubscribe observables, clear timers, and prevent memory leaks in Angular components.
About
Angular-destroyref skill guides proper DestroyRef usage for automatic cleanup of subscriptions, intervals, and DOM listeners in standalone components, reducing memory leaks and aligning with current Angular lifecycle APIs in production apps.
- DestroyRef injection pattern
- onDestroy callback registration
- Observable unsubscribe cleanup
- Timer and listener teardown
- Modern Angular lifecycle API
Angular Destroyref by the numbers
- 180 all-time installs (skills.sh)
- +1 installs in the week ending Aug 4, 2026 (Skillselion tracking)
- Ranked #893 of 2,245 Frontend Development skills by installs in the Skillselion catalog
- Data as of Aug 4, 2026 (Skillselion catalog sync)
npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill angular-destroyrefAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 180 |
|---|---|
| repo stars | ★ 6 |
| Last updated | April 4, 2026 |
| Repository | oguzhan18/angular-ecosystem-skills ↗ |
What it does
Register teardown callbacks with DestroyRef to unsubscribe observables, clear timers, and prevent memory leaks in Angular components.
Files
Angular DestroyRef
Version: Angular 16+ (2025) Tags: DestroyRef, Cleanup, takeUntilDestroyed
References: DestroyRef
Best Practices
- Use takeUntilDestroyed
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@Component({})
export class MyComponent {
private destroyRef = inject(DestroyRef);
ngOnInit() {
this.data$.pipe(
takeUntilDestroyed(this.destroyRef)
).subscribe();
}
}- Use in service
@Injectable({ providedIn: 'root' })
export class DataService {
private destroyRef = inject(DestroyRef);
getData() {
return this.http.get('/api/data').pipe(
takeUntilDestroyed(this.destroyRef)
);
}
}Related skills
Vercel React Best PracticesAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.587k29.6kVercel Composition PatternsGenerate and refactor React components that stay maintainable as complexity grows without boolean prop explosion.267k29.6k
ShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.257k120k
Develop UserscriptsCorrectly write, debug, and package userscripts for Tampermonkey and ScriptCat with proper metadata, GM APIs, and runtime decisions.224k72
Minimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilita212k69.4kImage To CodeConvert high-fidelity design images into production-ready, visually accurate frontend code that avoids generic AI design pitfalls.177k69.4kFrontend Developmentfrontend