Why should you care?

MeanVerse components subscribing to sockets or intervals must clean up in ngOnDestroy to prevent memory leaks.

See it live — copy this example

Paste into your MeanVerse project (Angular + Express + MongoDB), then run with ng serve / node / mongosh as noted.

@Component({ standalone: true, template: `<p>Live rate: {{ rate }}</p>` })
export class FxRateComponent implements OnInit, OnDestroy {
  rate = 0;
  private sub?: Subscription;

  ngOnInit(): void {
    this.sub = this.fx.stream('USD/EUR').subscribe(r => (this.rate = r));
  }

  ngOnDestroy(): void {
    this.sub?.unsubscribe();
  }
}

What happened?

• ngOnInit runs once after first change detection — good for subscriptions.
• ngOnDestroy unsubscribes so the socket does not keep updating a destroyed view.

Practice next

1. build OnInit to load data when route param changes.
2. Store Subscription and unsubscribe in ngOnDestroy.
3. Prefer takeUntilDestroyed() in Angular 16+ as alternative.
4. Refactor to signal + toObservable with automatic cleanup.
5. Log hook order in a demo component to see sequence.

Remember

ngOnInit = setup; ngOnDestroy = cleanup. Unsubscribe or use async pipe / takeUntilDestroyed. Hooks map to component birth and death.

Trading desk ticker

MeanVerse FX widget streams rates; user navigates away mid-session.

Outcome: ngOnDestroy stops updates — no ghost network traffic.