Angular 17 for loop example | @for block - Repeaters | track expression | @empty block

Angular 17 Tutorial:-
*********************
What Is Server-Side Rendering (SSR) and Why use?:- Angular 17 Tutorial - Server-Side Ren...
Angular 17 Component Inheritance:- Angular 17 Tutorial | Angular 17 Comp...
using ViewContainerRef To Render Dynamic Components:- Angular 17 Tutorial | using ViewConta...
Component Lifecycle Hooks:- Angular 17 Tutorial | Component Lifec...
Prerendering Static Site Generation (SSG):- Angular 17  Tutorial | Prerendering S...
Angular 17 for loop @for block Repeaters :- ttps://Angular 17 for loop example | @for bl...
Angular 17 if else statement example:- Angular 17 if else statement example ...
What's New in Angular 17?:- What's New in Angular 17 | The Best N...

From Angular 17, @for block - Repeaters:
The @for repeatedly renders the content of a block for each item in a collection. The collection can be represented as any JavaScript alterable but there are performance advantages of using a regular Array.

A basic @for loop looks like:
@for (item of items; track item.id) {
 {{ item.name }}
}
What Is ‘track’?
The track setting replaces NgFor's concept of a trackBy function.
The value of the ‘track’ expression determines a key used to associate array items with the views in the DOM.
Built-in control flow and the NgIf, NgSwitch and NgFor structural directives:
1.     The @if block replaces *ngIf for expressing conditional parts of the UI.
2.     The @switch block replaces ngSwitch with major benefits.
3.     The @for block replaces *ngFor for iteration, and has several differences compared to its structural directive NgFor predecessor.
4.     The track setting replaces NgFor's concept of a trackBy function.

These variables are always available with these names, but can be aliased via a let segment:
@for (item of items; track item.id; let i= $index, e = $even) {
  Item #{{ i }}: {{ item.name }}
}

The @empty block:
You can optionally include an @empty section immediately after the @for block content.

The content of the @empty block displays when there are no items:
A basic @empty block looks like:
@for (item of items; track item.name) {
 {{ item.name }}
} @empty {
 There are no items.
}