ngOnInit for initialization in Angular - Step-by-Step Execution

Concept Flow - ngOnInit for initialization

Component Created

↓

Constructor Runs

↓

ngOnInit Called

↓

Initialize Data

↓

Component Ready to Render

Angular calls ngOnInit after the component is created and constructor runs, to initialize data before rendering.

Execution Sample

Angular

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

@Component({ selector: 'app-sample', template: '{{message}}' })
export class SampleComponent implements OnInit {
  message = '';
  ngOnInit() {
    this.message = 'Hello from ngOnInit!';
  }
}

This component sets a message string inside ngOnInit, which updates the displayed text after initialization.

Execution Table

Step	Action	State Before	State After	Rendered Output
1	Component instance created	message = ''	message = ''
2	Constructor runs	message = ''	message = ''
3	ngOnInit called	message = ''	message = 'Hello from ngOnInit!'
4	Angular renders template	message = 'Hello from ngOnInit!'	message = 'Hello from ngOnInit!'	Hello from ngOnInit!

💡 ngOnInit completes, component data initialized, template rendered with updated message.

Variable Tracker

Variable	Start	After ngOnInit	Final
message	'' (empty string)	'Hello from ngOnInit!'	'Hello from ngOnInit!'

Key Moments - 2 Insights

Why is ngOnInit used instead of the constructor for initialization?

ngOnInit runs after Angular sets up input properties and component is ready, so initialization depending on inputs or Angular features should be done here, not in the constructor (see execution_table step 3).

What happens if you update variables before ngOnInit?

Variables set in the constructor exist but Angular may not have set inputs yet, so initialization depending on inputs might be incorrect. ngOnInit ensures Angular setup is done (see execution_table steps 1-3).

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'message' right after the constructor runs?

A '' (empty string)

B 'Hello from ngOnInit!'

C undefined

D null

💡 Hint

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

At which step does the component's displayed message update to 'Hello from ngOnInit!'?

A Step 1

B Step 3

C Step 4

D Step 2

💡 Hint

Look at the 'Rendered Output' column in the execution_table.

If you set 'message' in the constructor instead of ngOnInit, what might happen?

A Message initializes correctly before rendering.

B Message might initialize too early, before Angular sets inputs.

C Component will not render at all.

D ngOnInit will not be called.

💡 Hint

Refer to key_moments about constructor vs ngOnInit timing.

Concept Snapshot

ngOnInit is a lifecycle hook Angular calls after component creation and input setup.
Use ngOnInit to initialize data or fetch info needed before rendering.
Constructor runs earlier but should not depend on Angular inputs.
ngOnInit ensures component is ready for initialization.
Syntax: implement OnInit interface and define ngOnInit() method.

Full Transcript

In Angular, the ngOnInit method runs after the component is created and Angular sets up input properties. First, the component instance is created with default values. Then the constructor runs but should not contain complex initialization depending on Angular features. Next, ngOnInit is called where you can safely initialize variables or fetch data. Finally, Angular renders the template using the initialized data. This sequence ensures your component is ready and data is set before display.