Why Component lifecycle overview in Angular? - Purpose & Use Cases

The Big Idea

Discover how Angular tells your app exactly when to act, so you don't have to guess or check endlessly!

The Scenario

Imagine building a web app where you have to manually track when a part of the page appears, updates, or disappears. You write code to check every change and clean up resources yourself.

The Problem

This manual tracking is confusing and easy to forget. You might miss cleaning up event listeners or updating data at the right time, causing bugs and slow performance.

The Solution

Angular's component lifecycle automatically tells you when your component is created, updated, or destroyed. You can run code exactly at those moments without extra checks.

Before vs After

✗ Before

if (componentIsReady) { updateData(); } if (componentIsRemoved) { cleanup(); }

✓ After

ngOnInit() { setup(); } ngOnChanges() { updateData(); } ngOnDestroy() { cleanup(); }

What It Enables

This lets you build reliable, efficient apps that respond smoothly to user actions and system changes.

Real Life Example

Think of a chat app: when a chat window opens, you load messages; when new messages arrive, you update the view; when the window closes, you stop listening to new messages.

Key Takeaways

Manual tracking of component states is error-prone and complex.

Angular lifecycle hooks provide clear moments to run code.

This makes your app more stable and easier to maintain.

Practice

1. Which Angular lifecycle hook is called once after the component's data-bound properties have been initialized?

easy

A. ngOnInit()

B. ngOnDestroy()

C. ngAfterViewInit()

D. ngDoCheck()

Solution

1. Step 1: Understand lifecycle hook purpose

   ngOnInit() runs once after Angular sets component input properties.

2. Step 2: Compare other hooks

   ngOnDestroy() runs before component removal, ngAfterViewInit() after view initialization, ngDoCheck() on every change detection.

3. Final Answer:

   ngOnInit() -> Option A

4. Quick Check:

   Initialization hook = ngOnInit() [OK]

Hint: Initialization after inputs = ngOnInit() [OK]

Common Mistakes:

• Confusing ngOnInit with ngAfterViewInit
• Thinking ngOnDestroy runs on init
• Mixing ngDoCheck with ngOnInit

2. Which of the following is the correct syntax to implement the OnDestroy lifecycle hook in an Angular component?

easy

A. class MyComponent implements OnDestroy { ngDestroy() { } }

B. class MyComponent implements OnDestroy { ngOnDestroy() { } }

C. class MyComponent { onDestroy() { } }

D. class MyComponent implements OnDestroy { destroy() { } }

Solution

1. Step 1: Recall correct method name

   The lifecycle hook method for destruction is ngOnDestroy().

2. Step 2: Check interface implementation

   Implementing OnDestroy requires defining ngOnDestroy() exactly.

3. Final Answer:

   class MyComponent implements OnDestroy { ngOnDestroy() { } } -> Option B

4. Quick Check:

   OnDestroy method = ngOnDestroy() [OK]

Hint: Method name must be ngOnDestroy() exactly [OK]

Common Mistakes:

• Using wrong method name like ngDestroy or destroy
• Not implementing the interface
• Omitting parentheses in method

3. Given this Angular component code snippet, what will be logged to the console when the component is initialized and then destroyed?

export class SampleComponent implements OnInit, OnDestroy {
  ngOnInit() {
    console.log('Init');
  }
  ngOnDestroy() {
    console.log('Destroy');
  }
}

medium

A. Only Destroy

B. Only Init

C. Init followed by Destroy

D. No output

Solution

1. Step 1: Understand ngOnInit behavior

   ngOnInit() runs once when component initializes, logging 'Init'.

2. Step 2: Understand ngOnDestroy behavior

   ngOnDestroy() runs once before component is removed, logging 'Destroy'.

3. Final Answer:

   Init followed by Destroy -> Option C

4. Quick Check:

   Init then Destroy logs = Init followed by Destroy [OK]

Hint: Init logs on start, Destroy logs on removal [OK]

Common Mistakes:

• Assuming ngOnDestroy runs on init
• Expecting logs in reverse order
• Thinking no logs appear

4. Identify the error in this Angular component lifecycle hook implementation:

export class TestComponent implements OnInit {
  ngOnInit() {
    console.log('Component initialized');
  }
  ngOnDestroy() {
    console.log('Component destroyed');
  }
}

medium

A. Missing OnDestroy interface in implements clause

B. ngOnInit method name is incorrect

C. ngOnDestroy should not be used here

D. Console.log statements are invalid

Solution

1. Step 1: Check implemented interfaces

   The class implements OnInit but defines ngOnDestroy() without implementing OnDestroy.

2. Step 2: Understand interface contract

   To use ngOnDestroy(), the class should implement OnDestroy interface for clarity and correctness.

3. Final Answer:

   Missing OnDestroy interface in implements clause -> Option A

4. Quick Check:

   Implement interface for each lifecycle hook used [OK]

Hint: Implement interfaces for all lifecycle hooks used [OK]

Common Mistakes:

• Ignoring interface implementation for ngOnDestroy
• Thinking method names are wrong
• Believing console.log is invalid

5. You want to run code after Angular fully initializes the component's view and its child views. Which lifecycle hook should you use, and why? Choose the correct hook and reason.

hard

A. ngAfterContentInit() because it runs after projected content is initialized.

B. ngOnInit() because it runs after input properties are set.

C. ngDoCheck() because it runs on every change detection cycle.

D. ngAfterViewInit() because it runs after the component's view and child views are initialized.

Solution

1. Step 1: Identify hook for view initialization

   ngAfterViewInit() runs after Angular initializes the component's view and child views.

2. Step 2: Compare other hooks

   ngOnInit() runs earlier, ngAfterContentInit() runs after projected content, and ngDoCheck() runs repeatedly.

3. Final Answer:

   ngAfterViewInit() because it runs after the component's view and child views are initialized. -> Option D

4. Quick Check:

   View init completion = ngAfterViewInit() [OK]

Hint: Use ngAfterViewInit() for post-view initialization code [OK]

Common Mistakes:

• Confusing ngAfterContentInit with ngAfterViewInit
• Using ngOnInit for view-dependent code
• Expecting ngDoCheck to run once