Angular Lifecycle

Angular Lifecycle Hooks

Version: Angular 21 (2025) Tags: Lifecycle, Hooks, ngOnInit, ngOnChanges

References: Lifecycle Hooks • API

Best Practices

• Use OnInit for initialization

import { OnInit } from '@angular/core';

@Component({})
export class MyComponent implements OnInit {
  ngOnInit() {
    // Initialize data, call services
    this.loadData();
  }
}

• Use OnDestroy for cleanup

import { OnDestroy } from '@angular/core';

@Component({})
export class MyComponent implements OnDestroy {
  private destroy$ = new Subject<void>();
  
  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

• Use OnChanges for input changes

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

@Component({})
export class MyComponent implements OnChanges {
  @Input() data: any;
  
  ngOnChanges(changes: SimpleChanges) {
    if (changes['data']) {
      console.log('Data changed:', this.data);
    }
  }
}

• Use AfterViewInit for DOM manipulation

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