Diese Reihe wirft einen kurzen Blick auf einige Highlights der Angular Versionen 16 und 17. Heute: control flow.
Ein fantastisches neues Feature, welches in Angular 17 Einzug hält, ist die neue Block-Syntax, die in unseren Templates den Einsatz von Bedingungen und Schleifen stark vereinfacht. Hier setzt Angular auf eine ganz neue Syntax. Wo zuvor strukturelle Direktiven genutzt werden mussten (*ngIf, *ngFor…) erlaubt die neue Syntax nun eine wesentlich smartere Schreibweise
*ngIf
@if(show){
I got shown
} @else{
<div>me not</div>
}
*ngFor
<ul>
@for(u of users;track u.id){
<li>{{u.name}}</li>
} @empty{
<li>no entry</li>
}
</ul>
Besonderheiten:
- “track” (analog trackBy der alten Direktiven) ist nun verpflichtend und dient zur Performanceoptimierung
- @empty kann optional dazu verwendet werden, wenn keine Elemente vorhanden sind
*ngSwitch
@switch(userCount){
@case (0) { no one }
@case (1) { only one}
@case (2) { two are okay}
@default {more than we need}
}
Alles live in Farbe, bei GitHub
