What are Lifecycle Hooks in Angular?

Lifecycle Hooks in Angular (Angular) are special methods that allow you to tap into key moments of a component’s life — like when it's created, updated, or destroyed.

Think of them as events in a component’s life 🧬

For example:

Component created
Data received
UI rendered
Component destroyed

You can run custom code at each of these moments.

Angular Component Lifecycle Order

Here is the execution order (very important for interviews):

constructor
ngOnChanges
ngOnInit
ngDoCheck
ngAfterContentInit
ngAfterContentChecked
ngAfterViewInit
ngAfterViewChecked
ngOnDestroy

Most Important Lifecycle Hooks (Interview Focus)

1. ngOnInit() ⭐ (Most Common)

Called once after component initialization.

Use it for:

API calls
Initial data loading
Setup logic

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

When to use:

Load data from API
Initialize variables

2. ngOnChanges()

Called when Input properties change

Used when parent sends data to child.

@Input() userId: number;

ngOnChanges() {
  console.log('Input changed');
}

Example:
Parent changes value → Child detects change

3. ngOnDestroy() ⭐ (Very Important)

Called before component is destroyed

Use it for:

Unsubscribe Observables
Clear timers
Remove event listeners

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

Example:

this.subscription.unsubscribe();

This prevents memory leaks 🧠

Content Lifecycle Hooks

4. ngAfterContentInit()

Called after content projection (ng-content)

ngAfterContentInit() {
  console.log('Content initialized');
}

5. ngAfterContentChecked()

Called after content checked

ngAfterContentChecked() {
  console.log('Content checked');
}

View Lifecycle Hooks

6. ngAfterViewInit()

Called after component view loaded

Use when accessing:

DOM elements
Child components

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

Example:

@ViewChild('myDiv') div;

7. ngAfterViewChecked()

Called after view checked

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

Change Detection Hook

8. ngDoCheck()

Called every time Angular detects changes

⚠️ Use carefully (performance impact)

ngDoCheck() {
  console.log('Change detected');
}

Simple Lifecycle Flow Diagram

Component Created
     ↓
ngOnChanges
     ↓
ngOnInit
     ↓
ngDoCheck
     ↓
ngAfterContentInit
     ↓
ngAfterContentChecked
     ↓
ngAfterViewInit
     ↓
ngAfterViewChecked
     ↓
Component Destroyed
     ↓
ngOnDestroy

⭐ Real World Example

export class UserComponent implements OnInit, OnDestroy {

  ngOnInit() {
    console.log('Load user data');
  }

  ngOnDestroy() {
    console.log('Cleanup resources');
  }

}

Interview Questions

Q: Most commonly used lifecycle hooks?

Answer:

ngOnInit
ngOnChanges
ngOnDestroy
ngAfterViewInit

Q: Difference between constructor and ngOnInit?

Constructor	ngOnInit
Runs first	Runs after constructor
Used for DI	Used for logic
Avoid heavy logic	Best place for API calls

When to Use What

Hook	Use Case
ngOnInit	Load data
ngOnChanges	Input changes
ngAfterViewInit	Access DOM
ngOnDestroy	Cleanup
ngDoCheck	Custom change detection