Why lifecycle hooks matter in Angular - Visual Breakdown

Concept Flow - Why lifecycle hooks matter

Component Created

↓

ngOnInit Called

↓

Component Rendered

↓

User Interaction or Data Change

↓

ngOnChanges or ngDoCheck Called

↓

Component Updated

↓

Component Destroyed

↓

ngOnDestroy Called

This flow shows how Angular calls lifecycle hooks at key moments: creation, initialization, updates, and destruction of a component.

Execution Sample

Angular

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

@Component({ selector: 'app-demo', standalone: true, template: `<p>{{message}}</p>` })
export class DemoComponent implements OnInit, OnDestroy {
  message = '';
  ngOnInit() { this.message = 'Hello!'; }
  ngOnDestroy() { console.log('Cleanup done'); }
}

This Angular component sets a message when it starts and logs a message when it is destroyed.

Execution Table

Step	Lifecycle Hook	Action	Component State	Output/Effect
1	Component Created	Angular creates component instance	message = ''	No visible output yet
2	ngOnInit	Sets message to 'Hello!'	message = 'Hello!'	Template shows: Hello!
3	User interacts or data changes	No lifecycle hook yet	message = 'Hello!'	No change
4	Component destroyed	Calls ngOnDestroy	message = 'Hello!'	Console logs: Cleanup done

💡 Component lifecycle ends after ngOnDestroy is called when component is removed

Variable Tracker

Variable	Start	After ngOnInit	After User Interaction	After ngOnDestroy
message	''	'Hello!'	'Hello!'	'Hello!'

Key Moments - 2 Insights

Why does ngOnInit run after the component is created but before it is shown?

ngOnInit is designed to initialize data before the component appears on screen, as shown in step 2 of the execution_table where message is set before rendering.

What happens if we try to update the message in ngOnDestroy?

ngOnDestroy is for cleanup, not UI updates. The component is about to be removed, so changes like updating message won't affect the UI, as seen in step 4.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'message' after ngOnInit runs?

A 'Goodbye!'

B 'Hello!'

C ''

D undefined

💡 Hint

Check the 'Component State' column at step 2 in the execution_table.

At which step does the component show 'Hello!' on the screen?

A Step 3

B Step 1

C Step 2

D Step 4

💡 Hint

Look at the 'Output/Effect' column in the execution_table.

If we remove ngOnDestroy, what changes in the execution flow?

A No cleanup message in console

B Message never sets to 'Hello!'

C Component never created

D Component never destroyed

💡 Hint

Refer to step 4 in the execution_table where ngOnDestroy logs cleanup.

Concept Snapshot

Angular lifecycle hooks run at key moments:
- ngOnInit: initialize data before showing
- ngOnChanges/ngDoCheck: detect updates
- ngOnDestroy: cleanup before removal
They help manage component behavior smoothly.

Full Transcript

Angular components go through stages: creation, initialization, updates, and destruction. Lifecycle hooks like ngOnInit run after creation to set up data before the component appears. When data changes, hooks like ngOnChanges detect updates. Finally, ngOnDestroy runs before the component is removed to clean up resources. This flow ensures components behave predictably and efficiently.