Angular — Lifecycle

Lifecycle Hooks

Hook	When Called
constructor	Class instantiation
ngOnInit	After first ngOnChanges
ngOnChanges	When input properties change
ngDoCheck	Custom change detection
ngAfterContentInit	Content projected
ngAfterContentChecked	Content checked
ngAfterViewInit	View initialized
ngAfterViewChecked	View checked
ngOnDestroy	Before destruction

Example

import { Component, OnInit, OnChanges, OnDestroy, 
         AfterViewInit, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-lifecycle',
  template: `<p>{{message}}</p>`
})
export class LifecycleComponent implements OnInit, OnChanges, OnDestroy, AfterViewInit {
  @Input() data: any;
  message = 'Hello';
  
  constructor() {
    console.log('Constructor');
  }
  
  ngOnChanges(changes: SimpleChanges) {
    console.log('Changes:', changes);
  }
  
  ngOnInit() {
    console.log('Initialized');
  }
  
  ngAfterViewInit() {
    console.log('View ready');
  }
  
  ngOnDestroy() {
    console.log('Destroyed');
  }
}

Common Use Cases

Hook	Use Case
ngOnInit	Fetch data, initialize
ngOnChanges	React to input changes
ngOnDestroy	Cleanup subscriptions
ngAfterViewInit	Access child components

Mini Practice

1. Implement all lifecycle hooks
2. Log lifecycle events
3. Fetch data in ngOnInit
4. Clean up in ngOnDestroy

Up Next

Continue with Composition API — Angular composition patterns.