Component lifecycle overview in Angular - Deep Dive

Overview - Component lifecycle overview

What is it?

In Angular, a component lifecycle is the series of events from when a component is created to when it is destroyed. These events let you run code at specific times, like when the component appears on screen or when its data changes. Understanding this helps you control how your app behaves and responds to user actions. It is like knowing the stages of a plant's life to care for it properly.

Why it matters

Without knowing the component lifecycle, you might run code too early or too late, causing bugs or slow apps. It helps you manage resources, update the screen efficiently, and clean up when a component is no longer needed. This makes your app faster, smoother, and easier to maintain. Imagine trying to water a plant without knowing when it needs water or sunlight—it would not grow well.

Where it fits

Before learning component lifecycle, you should understand basic Angular components and templates. After this, you can learn about Angular services, routing, and state management to build complete apps. Lifecycle knowledge is a foundation for advanced topics like performance optimization and dynamic components.

Mental Model

Core Idea

A component lifecycle is a timeline of key moments when Angular creates, updates, and destroys a component, letting you run code at each moment.

Think of it like...

Think of a component like a theater play actor who has a script with cues: when to enter the stage, when to react to other actors, and when to leave. The lifecycle hooks are the cues telling the actor what to do and when.

┌───────────────┐
│ Component     │
│ Created       │
│ (constructor) │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ OnChanges     │
│ (ngOnChanges) │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ OnInit        │
│ (ngOnInit)    │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ DoCheck       │
│ (ngDoCheck)   │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ AfterContent  │
│ Init & Checked│
│ (ngAfterContentInit, ngAfterContentChecked)│
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ AfterView     │
│ Init & Checked│
│ (ngAfterViewInit, ngAfterViewChecked)│
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ Destroy       │
│ (ngOnDestroy) │
└───────────────┘

Build-Up - 6 Steps

1

Foundation

What is a component lifecycle

Concept: Introduce the idea that components have a life from creation to destruction.

A component in Angular is like a building block of your app. It is created when needed and removed when not. The lifecycle is the timeline of these events. Angular provides special moments called lifecycle hooks where you can run your own code.

Result

You understand that components are not static but have a flow of events you can tap into.

Understanding that components have a lifecycle helps you know when to run code safely and effectively.

2

Foundation

Basic lifecycle hooks explained

Concept: Learn the main lifecycle hooks and their purpose.

Angular has several hooks like ngOnInit (runs after component creation), ngOnChanges (runs when input data changes), and ngOnDestroy (runs before component removal). These hooks let you initialize data, respond to changes, and clean up resources.

Result

You can identify when to use each hook to control component behavior.

Knowing these hooks prevents common bugs like accessing data too early or forgetting to clean up.

3

Intermediate

How Angular detects changes

🤔Before reading on: do you think Angular automatically updates the screen whenever any data changes, or only at specific times? Commit to your answer.

Concept: Understand Angular's change detection and how it triggers lifecycle hooks.

Angular runs change detection to check if data has changed and updates the view. Hooks like ngOnChanges and ngDoCheck run during this process. ngOnChanges runs when input properties change, while ngDoCheck lets you add custom checks.

Result

You see how Angular keeps the screen in sync with data and how hooks fit into this.

Understanding change detection clarifies why some hooks run often and how to optimize performance.

4

Intermediate

Content and view lifecycle hooks

🤔Before reading on: do you think content and view hooks run at the same time or separately? Commit to your answer.

Concept: Learn the difference between content projection and view rendering hooks.

Content hooks (ngAfterContentInit, ngAfterContentChecked) run after projected content is initialized and checked. View hooks (ngAfterViewInit, ngAfterViewChecked) run after the component's own view is initialized and checked. This distinction helps manage complex component structures.

Result

You can control code execution depending on whether it relates to projected content or the component's own template.

Knowing this separation helps avoid timing bugs in nested or projected content scenarios.

5

Advanced

Cleaning up with ngOnDestroy

🤔Before reading on: do you think Angular automatically cleans up all resources when a component is destroyed, or do you need to do it manually? Commit to your answer.

Concept: Understand the importance of manual cleanup in ngOnDestroy.

Angular calls ngOnDestroy before removing a component. Here you should unsubscribe from observables, detach event handlers, and release resources. Failing to do so causes memory leaks and unexpected behavior.

Result

You can prevent memory leaks and keep your app healthy by cleaning up properly.

Knowing that Angular does not clean everything automatically prevents subtle bugs and performance issues.

6

Expert

Lifecycle hooks and performance optimization

🤔Before reading on: do you think running code in every lifecycle hook is always good for performance, or can it cause slowdowns? Commit to your answer.

Concept: Learn how to use lifecycle hooks wisely to optimize app performance.

Running heavy code in hooks like ngDoCheck or ngAfterViewChecked can slow your app because they run frequently. Use them sparingly and prefer OnPush change detection strategy to reduce unnecessary checks. Also, avoid side effects in hooks that run multiple times.

Result

You can write efficient components that update only when needed, improving user experience.

Understanding the cost of lifecycle hooks helps you write performant Angular apps and avoid common pitfalls.

Under the Hood

Angular creates a component instance and calls its constructor. Then it sets input properties and calls ngOnChanges if inputs changed. Next, it calls ngOnInit once after the first ngOnChanges. During change detection cycles, Angular calls ngDoCheck and other hooks to detect and respond to changes. When content or view is projected or rendered, Angular calls the respective after-content and after-view hooks. Finally, before removing the component, Angular calls ngOnDestroy to allow cleanup.

Why designed this way?

Angular's lifecycle hooks were designed to give developers fine control over component behavior at key moments. This modular approach separates concerns like initialization, change detection, and cleanup. Alternatives like automatic cleanup or no hooks would limit flexibility or cause hidden bugs. The design balances ease of use with power and performance.

┌───────────────┐
│ Constructor   │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ ngOnChanges   │
│ (if inputs)  │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ ngOnInit      │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ Change Detection Cycle │
│ ┌─────────────┐       │
│ │ ngDoCheck   │       │
│ │ ngOnChanges │       │
│ └─────────────┘       │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ ngAfterContentInit    │
│ ngAfterContentChecked │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ ngAfterViewInit       │
│ ngAfterViewChecked    │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ ngOnDestroy   │
└───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: do you think ngOnInit runs every time input properties change? Commit yes or no.

Common Belief: ngOnInit runs every time the component's input properties change.

Reality: ngOnInit runs only once after the component is created, not on input changes. ngOnChanges runs on input changes.

Why it matters: Confusing these hooks can cause initialization code to run multiple times or miss updates, leading to bugs.

Quick: do you think Angular automatically unsubscribes from observables when a component is destroyed? Commit yes or no.

Common Belief: Angular automatically cleans up all subscriptions and event listeners when a component is destroyed.

Reality: Angular does not automatically unsubscribe from observables or detach event listeners; you must do this in ngOnDestroy.

Why it matters: Failing to clean up causes memory leaks and unexpected app behavior.

Quick: do you think ngDoCheck is called only once per component lifecycle? Commit yes or no.

Common Belief: ngDoCheck runs only once after component initialization.

Reality: ngDoCheck runs frequently during every change detection cycle, which can be many times per second.

Why it matters: Misusing ngDoCheck for heavy tasks can severely degrade app performance.

Quick: do you think content and view lifecycle hooks run in any order? Commit yes or no.

Common Belief: Content and view lifecycle hooks run in no particular order and can be mixed.

Reality: Content hooks run before view hooks in a defined sequence to ensure proper initialization.

Why it matters: Ignoring the order can cause timing bugs when accessing projected content or view elements.

Expert Zone

1

ngAfterContentChecked and ngAfterViewChecked run after every change detection cycle, so avoid heavy logic there to prevent slowdowns.

2

Using OnPush change detection strategy reduces how often lifecycle hooks run, improving performance in large apps.

3

You can combine lifecycle hooks with RxJS operators to manage asynchronous data streams cleanly and avoid manual cleanup.

When NOT to use

Avoid relying on lifecycle hooks for complex state management or business logic; use services or state management libraries instead. Also, do not use lifecycle hooks to manipulate DOM directly; use Angular templates and directives for that.

Production Patterns

In real apps, ngOnInit is used for initialization like fetching data. ngOnDestroy cleans up subscriptions. ngOnChanges handles input updates. Developers use OnPush strategy and avoid heavy code in ngDoCheck and after-check hooks to keep apps fast.

Connections

React component lifecycle

Similar pattern with different hook names and timing

Knowing Angular lifecycle helps understand React's useEffect and other hooks, as both manage component creation, updates, and cleanup.

Operating system process lifecycle

Both have creation, running, and termination phases

Understanding component lifecycle is like understanding how an OS manages processes, which helps grasp resource management and cleanup.

Project management phases

Both follow stages from start to finish with checkpoints

Seeing lifecycle as phases with checkpoints helps plan and control complex tasks, whether in software or projects.

Common Pitfalls

#1 Not unsubscribing from observables in ngOnDestroy

Wrong approach:

ngOnDestroy() {
// forgot to unsubscribe
}

Correct approach:

ngOnDestroy() {
this.subscription.unsubscribe();
}

Root cause:

Believing Angular cleans up subscriptions automatically.

#2 Running heavy code in ngDoCheck causing slow app

Wrong approach:

ngDoCheck() {
this.heavyCalculation();
}

Correct approach:

ngDoCheck() {
// keep light or avoid heavy tasks here
}

Root cause:

Not realizing ngDoCheck runs very frequently.

#3 Using ngOnInit to respond to input changes

Wrong approach:

ngOnInit() {
this.updateData(this.inputProp);
}

Correct approach:

ngOnChanges(changes) {
if (changes.inputProp) {
this.updateData(changes.inputProp.currentValue);
}
}

Root cause:

Confusing ngOnInit with ngOnChanges purpose.

Key Takeaways

Angular components have a lifecycle with specific hooks to run code at key moments from creation to destruction.

Understanding when each lifecycle hook runs helps you initialize data, respond to changes, and clean up resources properly.

Change detection triggers many lifecycle hooks frequently, so use them wisely to avoid performance issues.

Manual cleanup in ngOnDestroy is essential to prevent memory leaks and keep your app healthy.

Advanced use of lifecycle hooks combined with Angular strategies leads to efficient, maintainable applications.