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.