Subscription Management

Memory leaks from unfinished subscriptions are a serious problem - like a ninja who forgot to return from a mission!

takeUntilDestroyed (Angular 16+) - Recommended

import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { DestroyRef, inject } from '@angular/core';

@Component({...})
export class ModernComponent {
  private destroyRef = inject(DestroyRef);

  constructor() {
    // Automatically completes when the component is destroyed
    this.dataService.getData().pipe(
      takeUntilDestroyed()
    ).subscribe(data => {
      this.processData(data);
    });

    // Can also be used outside the constructor
    this.loadData();
  }

  loadData(): void {
    this.http.get('/api/data').pipe(
      takeUntilDestroyed(this.destroyRef)
    ).subscribe();
  }
}

Traditional Approach with Subject

import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

@Component({...})
export class TraditionalComponent implements OnDestroy {
  private destroy$ = new Subject<void>();

  ngOnInit(): void {
    this.dataService.getData().pipe(
      takeUntil(this.destroy$)
    ).subscribe(data => {
      this.processData(data);
    });

    // Multiple subscriptions
    this.otherService.getOther().pipe(
      takeUntil(this.destroy$)
    ).subscribe();
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

AsyncPipe - Automatic Management

@Component({
  template: `
    @if (samuraiList$ | async; as samuraiList) {
      @for (s of samuraiList; track s.id) {
        <div>{{ s.name }}</div>
      }
    } @else {
      <p>Loading...</p>
    }
  `
})
export class SamuraiListComponent {
  // AsyncPipe automatically subscribes and unsubscribes!
  samuraiList$ = this.http.get<Samurai[]>('/api/samurai');
}

Subscription Collection

import { Subscription } from 'rxjs';

@Component({...})
export class CollectionComponent implements OnDestroy {
  private subscriptions = new Subscription();

  ngOnInit(): void {
    // Add subscriptions to the collection
    this.subscriptions.add(
      this.service1.data$.subscribe()
    );

    this.subscriptions.add(
      this.service2.data$.subscribe()
    );
  }

  ngOnDestroy(): void {
    // One line cancels all
    this.subscriptions.unsubscribe();
  }
}