NgFor vs @for in Angular: Key Differences and Usage

NgFor is Angular's traditional structural directive for looping over lists in templates, while @for is a newer, more concise control flow directive introduced with Angular's standalone components and signals. Both render lists but differ in syntax and reactive capabilities.

Quick Comparison

This table summarizes the main differences between NgFor and @for in Angular templates.

Feature	NgFor	@for
Syntax style	Structural directive with * prefix (e.g., *ngFor)	Control flow directive with @ prefix (e.g., @for)
Introduced in Angular version	Since Angular 2 (legacy but still standard)	Angular 16+ (modern, standalone components)
Reactivity support	Works with Angular change detection	Designed for fine-grained reactivity with signals
Template usage	Used as *ngFor="let item of items"	Used as @for(let item of items)
Learning curve	Widely known and documented	Newer, requires Angular 16+ knowledge
Performance	Good for most apps	Potentially better with signals and fine-grained updates

Key Differences

NgFor is Angular's classic way to loop over arrays in templates. It uses the *ngFor structural directive syntax, which modifies the DOM by repeating elements for each item. It works well with Angular's default change detection system but can trigger more updates than necessary in complex apps.

On the other hand, @for is a new control flow directive introduced in Angular 16 as part of the signals and standalone components system. It uses a cleaner syntax without the asterisk and integrates tightly with Angular's fine-grained reactivity model. This means it can update only the parts of the DOM that actually change, improving performance in reactive scenarios.

While NgFor is compatible with all Angular versions and widely used, @for requires Angular 16 or newer and a different reactive programming approach. The choice depends on your Angular version and whether you want to adopt the new reactive patterns.

Code Comparison

Here is how you use NgFor to display a list of names in Angular:

html

<ul>
  <li *ngFor="let name of names">{{ name }}</li>
</ul>

Output

<ul><li>Alice</li><li>Bob</li><li>Charlie</li></ul>

@for Equivalent

Here is the equivalent list rendering using the @for directive in Angular 16+:

html

<ul>
  @for(let name of names) {
    <li>{{ name }}</li>
  }
</ul>

Output

<ul><li>Alice</li><li>Bob</li><li>Charlie</li></ul>

When to Use Which

Choose NgFor if you are working on an existing Angular project or need compatibility with Angular versions before 16. It is stable, well-documented, and fits most use cases.

Choose @for when using Angular 16 or newer with standalone components and signals. It offers cleaner syntax and better performance with fine-grained reactivity, ideal for modern reactive Angular apps.

Key Takeaways

NgFor is the classic Angular loop directive, widely supported and easy to use.

@for is a new Angular 16+ directive designed for reactive, fine-grained updates.

Use NgFor for compatibility and simplicity in existing projects.

Use @for for modern Angular apps leveraging signals and standalone components.

Both render lists similarly but differ in syntax and reactive behavior.