Lifecycle Hooks

A component isn't just created once and left alone — Angular creates it, updates it repeatedly as data changes, and eventually destroys it. Lifecycle hooks are methods Angular calls automatically at specific points in that process, letting you run code exactly when it's needed.

The two you'll use constantly

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

@Component({
  selector: 'app-live-clock',
  template: `<p>Elapsed: {{ secondsElapsed }}s</p>`,
})
export class LiveClockComponent implements OnInit, OnDestroy {
  secondsElapsed = 0;
  private subscription?: Subscription;

  ngOnInit(): void {
    this.subscription = interval(1000).subscribe(() => {
      this.secondsElapsed++;
    });
  }

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

ngOnInit runs once, right after Angular has set the component's @Input properties for the first time — it's the standard place to fetch initial data or start a subscription, rather than the constructor, which runs before inputs are available. ngOnDestroy runs right before Angular removes the component, and is where you clean up anything that would otherwise keep running or leaking memory after the component is gone — subscriptions, timers, event listeners added manually.

Forgetting ngOnDestroy for a long-lived subscription is one of the most common sources of memory leaks and "why is this running twice" bugs in Angular apps — the component disappears from the screen, but the subscription it started keeps firing into a component instance nothing references anymore.

Reacting to changing inputs

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-user-avatar',
  template: `<img [src]="avatarUrl" />`,
})
export class UserAvatarComponent implements OnChanges {
  @Input() userId!: string;
  avatarUrl = '';

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['userId']) {
      this.avatarUrl = `/api/users/${this.userId}/avatar`;
    }
  }
}

ngOnChanges runs whenever an @Input value changes, before ngOnInit on the very first call and again on every subsequent change. changes tells you exactly which inputs changed and what their previous value was — useful when a component needs to react differently depending on which input changed, rather than re-running everything on every update.

The rest of the lifecycle, briefly

Angular calls several other hooks — ngAfterContentInit, ngAfterViewInit, ngDoCheck, and their ...Checked counterparts — at more specific points around content projection and view rendering. They exist for less common cases, like needing to measure a projected element's size after it's rendered. Most components you write will only ever need ngOnInit and, when they hold a subscription or timer, ngOnDestroy — reach for the others only when you have a specific, narrow reason to.

Signals are changing how much you need these

As you'll see in the Angular Signals lesson later in this course, a growing share of what ngOnChanges and manual subscriptions were used for can now be expressed with signals and the effect() function instead — but the two hooks above remain the backbone of component lifecycle management in Angular today.