Angular Lifecycle Hooks (ngOnInit, ngOnDestroy, and More)

Lifecycle hooks are methods Angular calls at different stages of a component’s life.

The ones you will use most

ngOnInit

Runs once after the component is created.
Good for:

• loading initial data
• starting subscriptions

ngOnDestroy

Runs once before the component is removed.
Good for:

• cleaning subscriptions
• stopping timers

Example

import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subscription, interval } from 'rxjs';

@Component({
  selector: 'app-timer',
  standalone: true,
  template: `<p>Seconds: {{ seconds }}</p>`,
})
export class TimerComponent implements OnInit, OnDestroy {
  seconds = 0;
  private sub?: Subscription;

  ngOnInit() {
    this.sub = interval(1000).subscribe(() => this.seconds++);
  }

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

Quick tip

• HTTP Observables complete automatically, usually safe.
• Streams like interval, router events, websockets need cleanup.

Next: Template-driven forms, building real input screens.