`ngFor` is Angular’s built-in structural directive for repeating an HTML element and its contents for each object in a collection. It is useful for product lists, table rows, and sets of buttons driven by component data. section 5.5.1 section 12.2.3
Generate a product table
`<tr *ngFor="let item of products()">` creates a row for each product returned by the component’s `products` signal. Inside that row, bindings such as `{{item.name}}` and `{{item.price}}` read the current product. The `of` expression supplies the collection; `let item` names the current object. The asterisk is required because the directive uses a micro-template. section 12.2.3
Listing 12.6. Using the ngFor directive in the template.html file in the src/app folder
<div class="text-white">
<div class="bg-info p-2">
There are {{ count() }} products.
</div>
<div class="p-1">
<table class="table table-sm table-bordered text-dark">
<tr><th>Name</th><th>Category</th><th>Price</th></tr>
<tr *ngFor="let item of products()">
<td>{{item.name}}</td>
<td>{{item.category}}</td>
<td>{{item.price}}</td>
</tr>
</table>
</div>
</div>
<button class="btn btn-info text-white mt-2" (click)="removeProduct()">
Remove
</button>
The complete template places `*ngFor` on a table row and binds its cells to the current product. section 12.2.3
Each repetition can also expose local values:
- `index` gives the current position and `count` gives the collection size; `let i = index; let c = count` makes them available for a label such as `{{i + 1}} of {{c}}`. section 12.2.3
- `odd` and `even` identify alternating positions; `first` and `last` identify the ends of the collection. These values can drive class bindings or conditional content. section 12.2.3
A repeated element can have other bindings. Category buttons use `*ngFor="let cat of categories()"`, a click binding to select `cat`, and a class binding to mark the selected category. A product card can similarly repeat while displaying its current product’s name, description, and currency-formatted price. section 5.5.2 section 5.5.1
`ngFor` iterates a collection; it does not generate elements from a counter alone. For numbered pagination buttons, first create an array of page numbers, then repeat over it. Where object replacement matters, `trackBy:getKey` supplies a component method that returns a key for each product. section 5.5.3 section 12.2.3
