Angular Component Lifecycle

The Angular Component Lifecycle defines a sequence of events that Angular calls at specific stages of a component’s existence — from creation to destruction. Understanding these lifecycle hooks helps you manage initialization, change detection, performance optimization, and resource cleanup effectively.

Angular Component Lifecycle Flowchart Overview.( Inspired by Angular’s official documentation and lifecycle management concepts.)

🚀 Angular Lifecycle Hooks Overview

1. ngOnChanges() (Called first when input properties change)

• Purpose: Responds to changes in @Input()-bound properties.
• When: Runs before ngOnInit() and whenever input data changes.

ngOnChanges(changes: SimpleChanges) {
  console.log('Input changed:', changes);
}

2. ngOnInit() (Initialization logic)

• Purpose: Executes after the first ngOnChanges() and when the component is initialized.
• When: Runs once after component creation.
• Common Use: API calls, setting up initial data, initializing properties.

ngOnInit() {
  console.log('Component Initialized');
}

3. ngDoCheck() (Custom change detection)

• Purpose: Detect and act on changes that Angular doesn’t catch with default change detection.
• When: Called during every change detection cycle (can impact performance if overused).

ngDoCheck() {
  console.log('Change detection triggered');
}

4. ngAfterContentInit() (After projecting external content)

• Purpose: Runs after Angular projects external content into the component using ng-content.
• When: Called once after the first content projection.

ngAfterContentInit() {
  console.log('Content projected into component');
}

5. ngAfterContentChecked() (After checking projected content)

• Purpose: Called after Angular checks the projected content for changes.
• When: After ngAfterContentInit() and every subsequent change detection cycle.

ngAfterContentChecked() {
  console.log('Projected content checked');
}

6. ngAfterViewInit() (After initializing view and child components)

• Purpose: Runs after the component’s view and all child views are fully initialized.
• When: Called once after view initialization.
• Common Use: DOM manipulations, initializing third-party libraries (like charts, maps).

ngAfterViewInit() {
  console.log('View initialized');
}

7. ngAfterViewChecked() (After checking the view for changes)

• Purpose: Called after Angular checks the view and child views for updates.
• When: Runs after every change detection cycle following ngAfterViewInit().

ngAfterViewChecked() {
  console.log('View checked');
}

8. ngOnDestroy() (Cleanup before component destruction)

• Purpose: Cleanup tasks like unsubscribing from Observables, clearing timers, or detaching event handlers.
• When: Right before Angular destroys the component.
• Common Use: Preventing memory leaks.

ngOnDestroy() {
  console.log('Component destroyed');
}

🔄 Angular Lifecycle Flow Diagram

Get Vishnu Vinodan’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

ngOnChanges() → ngOnInit() → ngDoCheck() →
ngAfterContentInit() → ngAfterContentChecked() →
ngAfterViewInit() → ngAfterViewChecked()
(repeats ngDoCheck, ngAfterContentChecked, ngAfterViewChecked on change detection)
→ ngOnDestroy()

🎯 Quick Use Cases

• API Calls: ngOnInit()
• DOM Manipulation: ngAfterViewInit()
• Change Detection Optimization: ngDoCheck()
• Resource Cleanup: ngOnDestroy()