javascript / intermediate
Snippet
Control-Flow-Syntax (@if / @for)
Angulars neue integrierte Control-Flow-Syntax bietet eine performantere und lesbarere Alternative zu strukturellen Direktiven wie *ngIf und *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
Erklärung
1
@if (items.length > 0)
Rendert den Block bedingt, wenn der Ausdruck wahr ist.
2
@for (item of items; track item.id)
Iteriert über eine Sammlung. Die 'track'-Eigenschaft ist für die Performance-Optimierung obligatorisch.
3
} @else {
Definiert einen alternativen Block, falls die @if-Bedingung falsch ist.