Angular Lifecycle Hooks

Lifecycle hooks are methods Angular calls at key moments (create, input changes, view init, destroy) so you can set up, react to changes, access template refs, and clean up.

Lifecycle Essentials

• What: Lifecycle hooks are methods Angular calls at key moments (init, input changes, view init, destroy).
• Setup: Use ngOnInit after inputs are set.
• React: Handle input changes in ngOnChanges.
• DOM ready: Use ngAfterViewInit to access @ViewChild refs.
• Cleanup: Release timers/subscriptions/listeners in ngOnDestroy.

import { OnInit, OnDestroy, AfterViewInit, ViewChild, ElementRef } from '@angular/core';

export class Demo implements OnInit, AfterViewInit, OnDestroy {
  @ViewChild('box') box!: ElementRef<HTMLInputElement>;
  intervalId: any;
  ngOnInit() { /* setup after inputs */ }
  ngAfterViewInit() { this.box.nativeElement.focus(); }
  ngOnDestroy() { clearInterval(this.intervalId); }
}

// Template: <input #box>

Example explained

• ngOnInit: Run setup that needs inputs already bound.
• @ViewChild + ngAfterViewInit: Access and focus the input only after the view is initialized.
• ngOnDestroy: Clean up timers/listeners to prevent leaks.

Lifecycle Hooks

• Toggle lifecycle: Showing a component (e.g., with *ngIf) runs ngOnInit; hiding it runs ngOnDestroy.
• Do/undo work: Start timers/subscriptions on init, clear/unsubscribe on destroy.

export class Child implements OnInit, OnDestroy {
  intervalId: any;
  ngOnInit() { this.intervalId = setInterval(() => {/* ... */}, 1000); }
  ngOnDestroy() { clearInterval(this.intervalId); }
  // <child-cmp *ngIf="show"></child-cmp>

Example explained

• ngOnInit: Starts a timer when the component is created.
• ngOnDestroy: Clears the timer when the component is removed.
• *ngIf: Toggling the condition creates/destroys the child, invoking the hooks.

import { bootstrapApplication } from '@angular/platform-browser';
import { Component, OnInit, OnDestroy } from '@angular/core';
import { CommonModule } from '@angular/common';

{{ ... }}
  show = true;
  toggle() { this.show = !this.show; }
}

bootstrapApplication(App);

<app-root></app-root>

Example explained

• Toggle: The button flips show to add/remove the child.
• Hooks in action: Creating the child runs ngOnInit; removing it runs ngOnDestroy.
• Cleanup: Clearing the interval prevents background work after destroy.

import { bootstrapApplication } from '@angular/platform-browser';
    import { Component, OnInit, OnDestroy } from '@angular/core';
    import { CommonModule } from '@angular/common';
    {{ ... }}
export class App {
  text = '';
}

bootstrapApplication(App);

<app-root></app-root>

Example explained

• Parent → Child: The input box updates text in the parent; the child receives it via [text].
• Change record: The child stores the last prev and curr values from SimpleChanges for display.
• Edge cases: Handles transitions like undefined → value or value → ''.

@ViewChild('box') box!: ElementRef<HTMLInputElement>;
ngAfterViewInit() { this.box.nativeElement.focus(); }

Example explained

• @Input(): The child declares an input text that parents can bind to.
• ngOnChanges(changes): Receives SimpleChanges with previousValue and currentValue for each changed input.
• Immutable updates: Prefer replacing references over mutating in place to trigger change detection.

import { bootstrapApplication } from '@angular/platform-browser';
import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { CommonModule } from '@angular/common';

{{ ... }}

bootstrapApplication(App);

<app-root></app-root>

Example explained

• Multiple refs: Reads both the input box and the panel container via @ViewChild.
• Defer DOM work: Uses setTimeout in ngAfterViewInit to let the view settle before measuring.
• measure(): Reads bounding box and formats a size string.

AfterViewInit & Cleanup

Access template refs after the view initializes and clean up resources when the component is destroyed.

// Example teardown pattern
sub?.unsubscribe?.();
clearInterval(intervalId);
removeListener?.();

Example explained

• Teardown: Unsubscribe, clear intervals, and remove listeners in ngOnDestroy.
• Safety: Optional chaining (?.) guards against missing handles.