B 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.
Before Angular 17, the
<li *ngFor="let user of users; index as i; first as
isFirst">
{{i}}/{{users.length}}.
{{user}} <span *ngIf="isFirst">default</span>
</li>
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.
Inside @for contents, several implicit variables are
always available:
1.
$count: Number
of items in a collection iterated over
2.
$index: Index
of the current row
3.
$first: Whether
the current row is the first row
4.
$last: Whether
the current row is the last row
5.
$even: Whether
the current row index is even
6.
$odd: Whether
the current row index is odd
These variables are always available with these names,
but can be aliased via a let segment:
@for
(item of items; track item.id; let idx = $index, e = $even) {
Item #{{ idx }}: {{ item.name }}
}
@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) {
<li> {{ item.name }} </li>
}
@empty {
<li> There are no items. </li>
}
Let see the other Example,
@for (user of users; track user.id) {
{{ user.name }}
} @empty {
Empty list of users
}
Examples: Loop over an array of users with Built-in for loop using @for:
const users = [
{ id: 1, name: ‘Anil’ },
{ id: 2, name: 'Reena' },
{ id: 3, name: 'Aradhya' },
{ id: 4, name: 'Shiva' },
];
<ul>
@for (user of users; track
user.id) {
<li>{{ user.name
}}</li>
} @empty {
<span>Empty list of
users</span>
}
</ul>
The output looks
like this:
1)
Anil
2)
Reena
3)
Aradhya
4)
Shiva
Requesting to subscribe to my YouTube channel! And explore the video content...