*ngFor for list rendering in Angular - Performance & Optimization

Performance: *ngFor for list rendering

MEDIUM IMPACT

*ngFor affects how many DOM elements are created and updated, impacting rendering speed and responsiveness when displaying lists.

Rendering a dynamic list of items efficiently

Angular

<div *ngFor="let item of items; trackBy: trackById">{{item.name}}</div>

trackById(index: number, item: any): any { return item.id; }

trackBy lets Angular identify items uniquely, so only changed items update in the DOM, reducing reflows.

📈 Performance GainSingle reflow and repaint for changed items only, not the entire list

Rendering a dynamic list of items efficiently

Angular

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

Without trackBy, Angular recreates all DOM elements on any list change, causing many reflows and repaints.

📉 Performance CostTriggers N reflows and repaints on each update where N is the list length

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
*ngFor without trackBy	Destroys and recreates all nodes on list change	N reflows for N items	High paint cost due to full redraw	[X] Bad
*ngFor with trackBy	Reuses existing nodes, updates only changed items	Single or minimal reflows	Low paint cost, partial redraw	[OK] Good

Rendering Pipeline

*ngFor creates DOM nodes for each list item. Without trackBy, Angular destroys and recreates nodes on any list change, causing layout recalculations and paint. With trackBy, Angular reuses nodes, minimizing layout thrashing.

→DOM Creation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout due to full DOM node recreation without trackBy

Core Web Vital Affected

INP

*ngFor affects how many DOM elements are created and updated, impacting rendering speed and responsiveness when displaying lists.

Optimization Tips

1Always use trackBy with *ngFor to uniquely identify list items.

2Avoid changing the list reference unnecessarily to prevent full re-renders.

3Keep list item templates simple to reduce paint cost.

Performance Quiz - 3 Questions

What is the main performance problem when using *ngFor without trackBy on a large list?

A Angular skips rendering the list entirely.

B Angular caches all DOM nodes and never updates the list.

C Angular recreates all DOM nodes on any list change causing many reflows.

D Angular only updates the first item in the list.

DevTools: Performance

How to check: Record a performance profile while updating the list. Look for long Layout and Recalculate Style tasks.

What to look for: Excessive Layout events and long scripting times indicate missing trackBy causing full DOM rebuilds.

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