Angular Destroyref

If you're still manually unsubscribing from observables in Angular or using the old ngOnDestroy pattern, this skill pushes you toward DestroyRef and takeUntilDestroyed, which became the recommended approach in Angular 16+. It covers the standard component cleanup pattern and also shows how to handle it in services, which is less obvious but equally important. The examples are minimal but hit the key scenarios. Honestly, this is one of those patterns that should just become muscle memory once you see it, and having Claude automatically reach for it when dealing with subscriptions saves you from memory leaks and outdated patterns.

skills.sh installs: 182
GitHub stars: 7
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add oguzhan18/angular-ecosystem-skills --skill angular-destroyref --agent claude-code

Installs into .claude/skills of the current project.

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)
    );
  }
}

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthly Promote your product hereReach 125k+ visitors monthly