Lifecycle execution order mental model in Angular - Step-by-Step Execution

Concept Flow - Lifecycle execution order mental model

Component Creation

↓

Constructor runs

↓

ngOnChanges if inputs change

↓

ngOnInit runs

↓

ngDoCheck runs

↓

Render View

↓

User Interaction or Data Change

↓

ngOnChanges if inputs change

↓

ngDoCheck runs

↓

Render View

↓

Component Destroy

↓

ngOnDestroy runs

This flow shows the order Angular calls lifecycle hooks from component creation to destruction, including changes and checks.

Execution Sample

Angular

constructor() { console.log('constructor'); }
ngOnChanges() { console.log('ngOnChanges'); }
ngOnInit() { console.log('ngOnInit'); }
ngDoCheck() { console.log('ngDoCheck'); }
ngOnDestroy() { console.log('ngOnDestroy'); }

Logs lifecycle hook calls in the order Angular executes them during component lifecycle.

Execution Table

Step	Trigger	Hook Called	Description	Output
1	Component created	constructor	Component class instance created	Logs 'constructor'
2	Input properties set	ngOnChanges	Detect input property changes	Logs 'ngOnChanges'
3	After first inputs set	ngOnInit	Initialize component after inputs	Logs 'ngOnInit'
4	Change detection cycle	ngDoCheck	Custom change detection logic	Logs 'ngDoCheck'
5	View rendered	Render	Component template rendered	View updates
6	Input properties change	ngOnChanges	Detect new input changes	Logs 'ngOnChanges'
7	Change detection cycle	ngDoCheck	Check for changes	Logs 'ngDoCheck'
8	View updated	Render	Update template with new data	View updates
9	Component destroyed	ngOnDestroy	Cleanup before removal	Logs 'ngOnDestroy'

💡 Component lifecycle ends after ngOnDestroy when component is removed.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 6	After Step 7	Final
Input properties	undefined	set with initial values	unchanged	unchanged	changed	changed	undefined after destroy
Component state	uninitialized	initializing	initialized	checked	checked	checked	destroyed

Key Moments - 3 Insights

Why does ngOnChanges run before ngOnInit?

Because Angular sets input properties first and calls ngOnChanges to notify about these changes before running ngOnInit to initialize the component (see execution_table steps 2 and 3).

When does ngDoCheck run and why?

ngDoCheck runs during every change detection cycle after ngOnInit and after any input changes to allow custom change detection logic (see steps 4 and 7).

What happens if the component is destroyed?

Angular calls ngOnDestroy to let the component clean up resources before removal (see step 9).

Visual Quiz - 3 Questions

Look at the execution table, which hook runs immediately after the constructor?

A ngOnChanges

B ngOnInit

C ngDoCheck

D ngOnDestroy

💡 Hint

Check step 2 in the execution_table where ngOnChanges runs after constructor.

At which step does Angular render the component view for the first time?

A Step 3

B Step 4

C Step 5

D Step 6

💡 Hint

Look at step 5 in execution_table where 'Render' happens after ngDoCheck.

If input properties change after initialization, which hooks run again?

A constructor and ngOnInit

B ngOnChanges and ngDoCheck

C ngOnDestroy only

D ngOnInit only

💡 Hint

See steps 6 and 7 where ngOnChanges and ngDoCheck run on input changes.

Concept Snapshot

Angular lifecycle hooks run in this order:
constructor -> ngOnChanges (on inputs) -> ngOnInit -> ngDoCheck -> Render
On input changes: ngOnChanges -> ngDoCheck -> Render
On destroy: ngOnDestroy
ngOnChanges runs before ngOnInit to catch input changes early.
ngDoCheck runs every change detection cycle for custom checks.

Full Transcript

This visual execution shows Angular component lifecycle order. First, the constructor runs when the component is created. Then Angular sets input properties and calls ngOnChanges to notify about changes. Next, ngOnInit runs to initialize the component. After that, ngDoCheck runs for custom change detection logic. The component view is rendered. When input properties change later, ngOnChanges and ngDoCheck run again followed by view update. Finally, when the component is removed, ngOnDestroy runs to clean up. Variables like input properties and component state change accordingly during these steps.