*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.

Practice

1. What does the Angular directive *ngFor="let item of items" do in a template?

easy

A. It repeats the HTML element for each item in the list called 'items'.

B. It creates a single HTML element and ignores the list.

C. It deletes all items from the list.

D. It sorts the list before displaying.

Solution

1. Step 1: Understand the directive purpose

   The *ngFor directive is used to repeat an HTML element for each item in a list.

2. Step 2: Analyze the syntax

   The syntax let item of items means for each element in the list 'items', create a copy of the element with 'item' as the current element.

3. Final Answer:

   It repeats the HTML element for each item in the list called 'items'. -> Option A

4. Quick Check:

   *ngFor repeats elements = A [OK]

Hint: Remember *ngFor repeats elements for each list item [OK]

Common Mistakes:

• Thinking *ngFor modifies the list itself
• Confusing *ngFor with event binding
• Assuming it creates only one element

2. Which of the following is the correct syntax to use *ngFor to loop over a list named fruits?

easy

A. *ngFor="let fruit in fruits"

B. *ngFor="fruits as fruit"

C. *ngFor="fruit of fruits"

D. *ngFor="let fruit of fruits"

Solution

1. Step 1: Recall correct Angular syntax

   The correct syntax for *ngFor uses let variable of list to iterate over the list.

2. Step 2: Compare options

   *ngFor="let fruit of fruits" uses let fruit of fruits, which matches the correct syntax. *ngFor="let fruit in fruits" uses 'in' which is incorrect in Angular templates.

3. Final Answer:

   *ngFor="let fruit of fruits" -> Option D

4. Quick Check:

   Use 'of' not 'in' in *ngFor syntax = B [OK]

Hint: Use 'let item of list' syntax for *ngFor loops [OK]

Common Mistakes:

• Using 'in' instead of 'of'
• Omitting 'let' keyword
• Swapping variable and list positions

3. Given the component code:

items = ['apple', 'banana', 'cherry'];

And the template:

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

What will be the rendered HTML output?

medium

A. fruitfruitfruit

B. items

C. applebananacherry

D.

Solution

1. Step 1: Understand the list and template

   The list 'items' contains three strings: 'apple', 'banana', and 'cherry'. The template uses *ngFor to create a
2. for each fruit.

3. Step 2: Render each item

   Each
4. will display the current fruit's name. So the output is three
5. elements with the fruit names inside a <ul>.

6. Final Answer:

   <ul><li>apple</li><li>banana</li><li>cherry</li></ul> -> Option C

7. Quick Check:

   *ngFor creates one element per list item = C [OK]

Hint: Each list item creates one repeated element [OK]

Common Mistakes:

• Expecting variable names instead of values
• Thinking *ngFor outputs the list name
• Missing the repeated elements

4. What is wrong with this Angular template snippet?

<div *ngFor="item of items">{{ item }}</div>

medium

A. The list 'items' is not defined.

B. The variable declaration is missing 'let' before 'item'.

C. The interpolation syntax {{ item }} is incorrect.

D. The *ngFor directive cannot be used on a <div> element.

Solution

1. Step 1: Check *ngFor syntax

   The correct syntax requires 'let' before the loop variable, so it should be *ngFor="let item of items".

2. Step 2: Verify other parts

   The interpolation {{ item }} is correct, and *ngFor can be used on any element including <div>. The question does not mention if 'items' is defined, so we assume it is.

3. Final Answer:

   The variable declaration is missing 'let' before 'item'. -> Option B

4. Quick Check:

   Always use 'let' before variable in *ngFor = A [OK]

Hint: Always write 'let' before the variable in *ngFor [OK]

Common Mistakes:

• Omitting 'let' keyword
• Assuming *ngFor needs special elements
• Confusing interpolation syntax

5. You have a list of users with some having empty names:

users = [{name: 'Alice'}, {name: ''}, {name: 'Bob'}, {name: null}];

How can you use *ngFor to render only users with a non-empty, non-null name?

hard

A. *ngFor="let user of users" <div *ngIf="user.name">{{ user.name }}</div>

B. *ngFor="let user of users | filter: user.name"

C. *ngFor="let user of users" <div *ngIf="user.name !== ''">{{ user.name }}</div>

D. *ngFor="let user of users" <ng-container *ngIf="user.name">{{ user.name }}</ng-container>

Solution

1. Step 1: Understand filtering in template

   Angular's *ngFor does not support filtering directly. We use *ngIf inside the loop to conditionally show elements.

2. Step 2: Check conditions for non-empty names

   Using *ngIf="user.name" filters out empty strings and null values because they are falsy in Angular templates.

3. Step 3: Compare options

   *ngFor="let user of users" <div *ngIf="user.name">{{ user.name }}</div> correctly uses *ngIf="user.name" inside the loop. *ngFor="let user of users" <ng-container *ngIf="user.name">{{ user.name }}</ng-container> has invalid syntax mixing *ngFor and *ngIf on the same element. *ngFor="let user of users | filter: user.name" uses a non-existent filter pipe. *ngFor="let user of users" <div *ngIf="user.name !== ''">{{ user.name }}</div> misses filtering null values.

4. Final Answer:

   *ngFor="let user of users" <div *ngIf="user.name">{{ user.name }}</div> -> Option A

5. Quick Check:

   Use *ngIf inside *ngFor to filter falsy names = D [OK]

Hint: Use *ngIf inside *ngFor to skip empty or null items [OK]

Common Mistakes:

• Trying to filter list directly in *ngFor
• Using invalid syntax combining *ngFor and *ngIf
• Not filtering null values properly