*ngFor for list rendering in Angular - Deep Dive

Overview - *ngFor for list rendering

What is it?

*ngFor is a special Angular directive that helps you show a list of items on the screen by repeating a block of HTML for each item. It works like a loop inside your HTML template, creating one copy of the block for every item in your list. This makes it easy to display things like lists, tables, or menus dynamically based on your data. You just tell Angular what list to use, and it handles the rest.

Why it matters

Without *ngFor, you would have to write repetitive HTML for each item manually or use complex JavaScript to update the page. This would be slow, error-prone, and hard to maintain. *ngFor solves this by automatically syncing your data with the view, so when your list changes, the screen updates smoothly. This makes building dynamic, data-driven apps much easier and faster.

Where it fits

Before learning *ngFor, you should understand basic Angular templates and how data binding works. After mastering *ngFor, you can move on to more advanced topics like trackBy for performance, nested loops, and combining *ngFor with other directives like *ngIf for conditional rendering.

Mental Model

Core Idea

*ngFor repeats a piece of HTML for each item in a list, keeping the view and data in sync automatically.

Think of it like...

Imagine you have a cookie cutter and a batch of dough. *ngFor is like pressing the cutter repeatedly to make many cookies from the same shape, one for each piece of dough.

List of items
  ↓
┌───────────────┐
│ *ngFor block  │  ← repeated for each item
│  HTML inside  │
└───────────────┘
  ↓
Rendered list on screen

Build-Up - 6 Steps

1

Foundation

Basic *ngFor syntax and usage

Concept: Learn how to write the simplest *ngFor directive to loop over an array and display items.

In your Angular template, you write:

{{item}}

. Here, 'items' is an array in your component, and Angular creates one

for each item, showing its value.

Result

The page shows a list with one line per item from the array.

Understanding this basic syntax is the foundation for all list rendering in Angular.

2

Foundation

Accessing index and local variables

Concept: Learn how to get the current item's position and other useful info inside *ngFor.

You can write:

Index {{i}}: {{item}}

. Angular provides local variables like 'index' to know the position of each item.

Result

Each list item shows its position number along with the value.

Knowing local variables lets you add extra info or style based on position.

3

Intermediate

Using trackBy for performance

🤔Before reading on: do you think Angular re-renders the entire list or only changed items when the data updates? Commit to your answer.

Concept: Learn how to tell Angular how to track items uniquely to avoid unnecessary re-rendering.

By default, Angular compares items by reference and may recreate DOM elements unnecessarily. Using trackBy, you provide a function that returns a unique id for each item:

. This helps Angular update only changed items.

Result

Angular updates the list efficiently, improving performance especially for large lists.

Understanding trackBy prevents slow UI updates and flickering in dynamic lists.

4

Intermediate

Nested *ngFor loops

🤔Before reading on: do you think you can use *ngFor inside another *ngFor to render nested lists? Commit to yes or no.

Concept: Learn how to render lists inside lists by nesting *ngFor directives.

You can write:

{{group.name}}

• {{item}}

. This shows a list of groups, each with its own list of items.

Result

The page shows multiple groups, each with their own sublist of items.

Knowing nested loops lets you build complex, hierarchical views easily.

5

Advanced

Combining *ngFor with *ngIf for conditional lists

🤔Before reading on: do you think you can put *ngIf and *ngFor on the same element? Commit to yes or no.

Concept: Learn how to conditionally show items in a list by combining *ngFor with *ngIf correctly.

Angular does not allow multiple structural directives on one element. Instead, wrap the element:

{{item.name}}

. This shows only visible items.

Result

Only items passing the condition appear in the list.

Knowing how to combine directives avoids template errors and keeps your UI logic clean.

6

Expert

How Angular renders and updates *ngFor lists

🤔Before reading on: do you think Angular recreates all DOM elements on list change or reuses existing ones? Commit to your answer.

Concept: Understand the internal process Angular uses to create, update, and remove DOM elements for *ngFor lists.

Angular compiles *ngFor into code that creates embedded views for each item. When the list changes, Angular compares old and new items using trackBy or reference, then adds, moves, or removes views accordingly. This process is optimized to minimize DOM changes.

Result

Angular efficiently updates the visible list with minimal DOM operations.

Knowing this internal mechanism helps you write performant lists and debug rendering issues.

Under the Hood

*ngFor is a structural directive that Angular compiles into embedded views. Each item in the list creates a view instance with its own context. Angular maintains a view container to hold these views. When the list changes, Angular uses a differ algorithm to detect changes and updates the views by adding, moving, or removing them in the DOM. The trackBy function helps Angular identify items uniquely to optimize this process.

Why designed this way?

Angular needed a way to declaratively render lists in templates while keeping the DOM in sync with data changes efficiently. Using embedded views and a differ algorithm allows Angular to minimize DOM manipulations, which are costly for performance. Alternatives like recreating the entire list on every change were too slow. The design balances ease of use with runtime efficiency.

Component Data (items array)
        ↓
  ┌─────────────────────┐
  │ *ngFor Directive    │
  │ Creates Embedded    │
  │ Views for each item │
  └─────────┬───────────┘
            │
  ┌─────────▼───────────┐
  │ View Container      │
  │ Holds all item views│
  └─────────┬───────────┘
            │
  ┌─────────▼───────────┐
  │ Change Detection    │
  │ Uses differ to find │
  │ added/removed items │
  └─────────┬───────────┘
            │
  ┌─────────▼───────────┐
  │ DOM Updates         │
  │ Add/Move/Remove     │
  │ item views          │
  └─────────────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does Angular recreate all list items in the DOM every time the list changes? Commit to yes or no.

Common Belief: Angular always recreates the entire list in the DOM when data changes.

Reality: Angular reuses existing DOM elements and only updates what changed, especially when trackBy is used.

Why it matters: Believing this leads to ignoring trackBy, causing poor performance and flickering in large or frequently updated lists.

Quick: Can you put *ngFor and *ngIf on the same HTML element? Commit to yes or no.

Common Belief: You can freely combine *ngFor and *ngIf on the same element without issues.

Reality: Angular does not allow multiple structural directives on one element; you must wrap one inside an .

Why it matters: Ignoring this causes template errors and confusion, blocking conditional list rendering.

Quick: Does *ngFor only work with arrays? Commit to yes or no.

Common Belief: *ngFor only works with arrays and cannot iterate over other data types.

Reality: *ngFor can iterate over any iterable, including Sets, Maps (with keyvalue pipe), and custom iterables.

Why it matters: Limiting *ngFor to arrays restricts flexibility and misses powerful Angular features.

Quick: Does trackBy always improve performance regardless of list size? Commit to yes or no.

Common Belief: Using trackBy is always necessary and improves performance in every case.

Reality: For very small or static lists, trackBy adds complexity without noticeable benefit.

Why it matters: Overusing trackBy can complicate code unnecessarily; knowing when to use it avoids wasted effort.

Expert Zone

1

trackBy functions must return stable and unique identifiers; returning non-unique values breaks Angular's differ and causes bugs.

2

Using index as trackBy key can cause subtle bugs when list items reorder or are inserted/removed.

3

Angular's differ algorithm is optimized for common cases but can degrade if trackBy is missing or keys are unstable.

When NOT to use

*ngFor is not suitable for rendering extremely large lists without virtualization. In such cases, use Angular CDK's virtual scroll to render only visible items for performance.

Production Patterns

In real apps, *ngFor is combined with trackBy for performance, nested loops for complex data, and wrapped with for conditional rendering. Developers also use pipes to transform data before rendering and lazy loading to optimize initial load.

Connections

React map() list rendering

Both render lists by repeating UI elements for each data item.

Understanding *ngFor helps grasp React's map() usage for lists, showing how frameworks solve the same problem differently.

Database query result iteration

*ngFor conceptually mirrors iterating over rows returned by a database query to display them.

Knowing how data flows from database to UI clarifies why list rendering directives like *ngFor are essential.

Factory assembly line

*ngFor acts like an assembly line repeating a process for each item in a batch.

Seeing *ngFor as an assembly line helps understand how Angular efficiently creates many similar UI pieces.

Common Pitfalls

#1 Forgetting to use trackBy in large lists causes slow rendering.

Wrong approach:

{{item.name}}

Correct approach:

{{item.name}}

Root cause:

Not realizing Angular re-renders all items by default without a unique key.

#2 Placing *ngFor and *ngIf on the same element causes errors.

Wrong approach:

{{item.name}}

Correct approach:

{{item.name}}

Root cause:

Misunderstanding Angular's restriction on multiple structural directives per element.

#3 Using index as trackBy key leads to wrong DOM updates on reorder.

Wrong approach:

trackByIndex(index: number, item: any) { return index; }

Correct approach:

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

Root cause:

Confusing stable unique IDs with changing indexes.

Key Takeaways

*ngFor is Angular's way to repeat HTML blocks for each item in a list, keeping UI and data in sync.

Using local variables like index inside *ngFor helps add context to each item rendered.

trackBy is crucial for performance in dynamic or large lists by letting Angular identify items uniquely.

You cannot combine multiple structural directives on one element; use to work around this.

Understanding Angular's internal rendering process helps write efficient and bug-free list views.