NgFor

ngFor is a structural directive in Angular that renders a template once for each item in an iterable. It is most commonly used in templates with the shorthand syntax *ngFor, which expands to a template that repeats for every element of the bound collection. The directive is provided by the CommonModule as NgForOf and is widely used for list rendering in Angular applications.

Syntax and usage: A typical example is <li *ngFor="let item of items; index as i; first as isFirst; last as isLast; even as isEven; odd as isOdd"> {{ i }}: {{ item.name }} </li>. The item variable represents the current element, while index, first, last, even, and odd are optional local variables that expose information about the position or parity of each item. The star syntax is a shorthand for a template that binds to NgForOf.

Local variables and trackBy: Local variables can be aliased, for example index as i or let i = index, and can be used in conjunction with trackBy to optimize rendering. Example: <li *ngFor="let item of items; trackBy: trackById">, with a component method like trackById(index: number, item: Item) { return item.id; }. TrackBy provides a stable identity for items, enabling Angular to reuse existing DOM nodes when the list changes.

Underlying mechanism: ngForOf is the actual directive; *ngFor is structural sugar that expands to an ng-template with [ngForOf] bound to the collection and local variables declared via let. On changes to the iterable, Angular updates the view efficiently by adding, removing, or reusing views.

Iterable support: ngForOf accepts any iterable, including arrays, Sets, and other objects implementing the iterable protocol. It does not iterate plain objects unless converted to an array.