javascript / intermediate
Snippet
Control Flow Syntax (@if / @for)
Angular's new built-in control flow syntax provides a more performant and readable alternative to structural directives like *ngIf and *ngFor.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
@if (items.length > 0) {<ul>@for (item of items; track item.id) {<li>{{ item.name }}</li>}</ul>} @else {<p>No items found.</p>}
angular
Breakdown
1
@if (items.length > 0)
Conditionally renders the block if the expression is truthy.
2
@for (item of items; track item.id)
Iterates over a collection. The 'track' property is mandatory for performance optimization.
3
} @else {
Defines an alternative block if the @if condition is false.