*ngFor for list rendering in Angular - Step-by-Step Execution

Concept Flow - *ngFor for list rendering

Component has list data

↓

*ngFor directive reads list

↓

For each item in list

↓

Create DOM element for item

↓

Insert element into template

↓

Repeat until all items rendered

↓

Display full list in UI

Angular's *ngFor reads a list and creates a DOM element for each item, inserting them into the template to display the full list.

Execution Sample

Angular

<ul>
  <li *ngFor="let fruit of fruits">{{ fruit }}</li>
</ul>

This code renders a list of fruits as list items inside an unordered list.

Execution Table

Step	Action	Current Item	DOM Element Created	Template State
1	Start rendering *ngFor	N/A	None	Empty <ul>
2	Read first item	Apple	<li>Apple</li>	<ul><li>Apple</li></ul>
3	Read second item	Banana	<li>Banana</li>	<ul><li>Apple</li><li>Banana</li></ul>
4	Read third item	Cherry	<li>Cherry</li>	<ul><li>Apple</li><li>Banana</li><li>Cherry</li></ul>
5	All items processed	N/A	None	Final <ul> with 3 <li> elements</ul>

💡 All items in the fruits list have been rendered, so *ngFor stops.

Variable Tracker

Variable	Start	After 1	After 2	After 3	Final
fruits	["Apple", "Banana", "Cherry"]	["Apple", "Banana", "Cherry"]	["Apple", "Banana", "Cherry"]	["Apple", "Banana", "Cherry"]	["Apple", "Banana", "Cherry"]
current item	N/A	Apple	Banana	Cherry	N/A
DOM elements count	0	1	2	3	3

Key Moments - 3 Insights

Why does *ngFor create multiple <li> elements instead of one?

*ngFor loops over each item in the list and creates a separate DOM element for each, as shown in execution_table rows 2-4.

What happens if the list is empty?

If the list is empty, *ngFor does not create any elements, so the template remains empty, similar to step 1 in execution_table.

How does Angular know which item is current during rendering?

Angular assigns each item to the variable declared after 'let' (here 'fruit'), updating it each iteration as shown in variable_tracker 'current item'.

Visual Quiz - 3 Questions

Look at the execution_table, what is the DOM element created at step 3?

A <li>Cherry</li>

B <li>Apple</li>

C <li>Banana</li>

D No element created

💡 Hint

Check the 'DOM Element Created' column at step 3 in execution_table.

At which step does *ngFor finish rendering all items?

A Step 2

B Step 5

C Step 3

D Step 1

💡 Hint

Look for the step where 'All items processed' is noted in execution_table.

If the fruits list had 5 items instead of 3, how would the DOM elements count change after step 3?

A It would be 3

B It would be 5

C It would be 0

D It would be 4

💡 Hint

Variable_tracker shows DOM elements count increases by one per item processed; after step 3 only 3 items processed.

Concept Snapshot

*ngFor directive syntax:
<li *ngFor="let item of list">{{ item }}</li>

Behavior:
- Loops over each item in list
- Creates one DOM element per item
- Inserts elements into template

Key rule:
*ngFor updates DOM dynamically as list changes

Full Transcript

Angular's *ngFor directive helps render lists by looping over each item in a data array. It creates a DOM element for each item and inserts it into the template. For example, given a fruits list, *ngFor creates a list item for each fruit. The execution table shows step-by-step how each fruit is read and a corresponding <li> element is created and added to the <ul>. The variable tracker shows the current item and how many DOM elements exist after each step. Beginners often wonder why multiple elements are created; this is because *ngFor repeats the template for each item. If the list is empty, no elements are created. Angular uses the variable declared after 'let' to hold the current item during rendering. This process continues until all items are rendered, then *ngFor stops. This makes displaying dynamic lists easy and efficient in Angular.