Component lifecycle overview in Angular - Step-by-Step Execution

Concept Flow - Component lifecycle overview

Component Creation

↓

Constructor runs

↓

ngOnChanges if inputs

↓

ngOnInit runs

↓

Component Rendered

↓

User Interaction or Input Changes

↓

ngOnChanges/ngDoCheck

↓

ngAfterContentInit/ngAfterContentChecked

↓

ngAfterViewInit/ngAfterViewChecked

↓

ngOnDestroy runs

↓

Component Destroyed

This flow shows the main steps Angular components go through from creation to destruction, including lifecycle hooks triggered at each stage.

Execution Sample

Angular

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

@Component({ selector: 'app-sample', template: '<p>Hello</p>' })
export class SampleComponent implements OnInit, OnDestroy {
  ngOnInit() { console.log('Init'); }
  ngOnDestroy() { console.log('Destroy'); }
}

A simple Angular component that logs messages when it initializes and when it is destroyed.

Execution Table

Step	Lifecycle Hook	Trigger/Event	Action	Console Output
1	Constructor	Component created	Initialize component instance
2	ngOnChanges	Input properties set	Respond to input changes
3	ngOnInit	After first ngOnChanges	Component initialization logic	Init
4	Component Render	After ngOnInit	Render template to DOM
5	User Interaction	User changes input	Detect changes
6	ngOnChanges	Input changed	Respond to input changes
7	ngDoCheck	Change detection cycle	Custom change detection
8	ngAfterContentInit	After content projection	Content init logic
9	ngAfterContentChecked	After content checked	Content check logic
10	ngAfterViewInit	After view init	View init logic
11	ngAfterViewChecked	After view checked	View check logic
12	ngOnDestroy	Just before component destroyed	Cleanup logic	Destroy
13	-	Component removed	Component destroyed and removed from DOM

💡 Component lifecycle ends after ngOnDestroy when component is removed from DOM.

Variable Tracker

Variable	Constructor	After ngOnInit	After User Input Change	After ngOnDestroy
componentInstance	Created	Initialized	Updated if inputs changed	Destroyed

Key Moments - 3 Insights

Why does ngOnInit run only once and not on every input change?

ngOnInit runs once after the first ngOnChanges to initialize the component. Later input changes trigger ngOnChanges but not ngOnInit, as shown in execution_table rows 3 and 6.

What is the difference between ngOnChanges and ngDoCheck?

ngOnChanges runs only when input properties change, while ngDoCheck runs every change detection cycle for custom checks. See execution_table rows 6 and 7.

When should cleanup code be placed in the component?

Cleanup code should be in ngOnDestroy, which runs just before the component is removed, as shown in execution_table row 12.

Visual Quiz - 3 Questions

Look at the execution_table, at which step does the component first render its template?

A Step 3 - ngOnInit

B Step 4 - Component Render

C Step 1 - Constructor

D Step 12 - ngOnDestroy

💡 Hint

Check the 'Action' column for when the template is rendered to the DOM.

According to variable_tracker, what happens to componentInstance after ngOnDestroy?

A It remains initialized

B It is updated with new inputs

C It is destroyed

D It is recreated

💡 Hint

Look at the 'After ngOnDestroy' column for componentInstance.

If input properties change, which lifecycle hook runs according to execution_table?

A ngOnChanges

B ngOnInit

C ngOnDestroy

D ngAfterViewInit

💡 Hint

See which hook runs on input changes in execution_table rows 2 and 6.

Concept Snapshot

Angular component lifecycle:
- Constructor: create instance
- ngOnChanges: on input changes
- ngOnInit: once after first inputs
- Render: template shown
- ngDoCheck: every change detection
- ngAfterContentInit/ViewInit: after content/view setup
- ngOnDestroy: cleanup before removal
Use hooks to manage component behavior at each stage.

Full Transcript

This visual execution shows the Angular component lifecycle from creation to destruction. It starts with the constructor creating the component instance. Then ngOnChanges runs if input properties are set or changed. ngOnInit runs once after the first ngOnChanges to initialize the component. The component template is then rendered to the DOM. User interactions or input changes trigger ngOnChanges and ngDoCheck for detecting changes. After content and view are initialized and checked, the component continues running until it is destroyed. ngOnDestroy runs cleanup code before the component is removed from the DOM. Variables like the component instance change state accordingly during these steps. Key moments include understanding when ngOnInit runs, the difference between ngOnChanges and ngDoCheck, and placing cleanup in ngOnDestroy. The quizzes test knowledge of render timing, component destruction, and input change hooks.

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