Control Flow
Control flow of template blocks for conditionally showing, hiding and repeating elements.
@if
@if
Conditionally displays its content when its condition expression is truthy.
@if (a > b) {
{{ a }} is greater than {{ b }}
} @else if (b > a) {
{{ a }} is less than {{ b }}
} @else {
{{ a }} is equal to {{ b }}
}
Referencing the conditional expression's result
The @if
conditional supports saving the result of the conditional expression into a variable for reuse inside of the block.
@if (user.profile.settings.startDate; as startDate) {
{{ startDate }}
}
@switch
@switch
This block provides an alternate syntax to conditionally render data.
@switch (userPermissions) {
@case ('admin') {
<app-admin-dashboard />
}
@case ('reviewer') {
<app-reviewer-dashboard />
}
@case ('editor') {
<app-editor-dashboard />
}
@default {
<app-viewer-dashboard />
}
}
@for
@for
To render content of a block for each item in a collection.
@for (item of items; track item.id) {
{{ item.name }}
}
track
track
For tracking changes in the collection.
Using track
can significantly enhance your application's performance.
@empty
@empty
To define fallback content if the items
list is empty.
@for (item of items; track item.id) {
{{ item.name }}
} @empty {
<span>Nothing to show..</span>
}
$index
and others
$index
and othersThere are several implicit and always available variables that Angular provides in @for
or ngFor
blocks.
$count
: Number of items in a collection iterated over.$index
: Index of the current row.$first
: Whether the current row is the firts row.$last
: Whether the current row is the last row.$even
: Whether the current index is even.$odd
: Whether the current index is odd.
Last updated