Mit Angular 22 kommen ein paar neue Nettigkeiten in die Template-Engine von Angular, die bisher so nicht möglich waren. Werfen wir einen kurzen Blick auf eben diese Features
Kommentare für HTML Elemente
Eher ein kleines Thema, trotzdem hier und da vielleicht Hilfreich. HTML Kommentare sind nun in HTML Elemente erlaubt und ermöglichen es diese zu dokumentieren:
<button matButton
// matButton von material
/**
noch nicht implementiert
**/
>primary!</button>
Spread Operator
Wer kenn ihn nicht? In unseren Komponenten ständig im Einsatz, jetzt erlaubt uns Angular den Spread Operator, also das „auspacken“ von Array-Elementen direkt im Template zu verwenden.
@Component({
...
})
export class Template {
elements1 = signal(['a', 'b']);
elements2 = signal(['c', 'd']);
}
<ul>
@for(e of [...elements1(), ...elements2()]; track e){
<li>{{ e }}</li>
}
</ul>
Switch mit multiplem Matching und Compiler Prüfung
Die Switch-Anweisung im Template erlaubt es nun unterschiedliche Fälle mit derselben Implementierung abzufangen. Zusätzlich aktiviert ein @default never; am Ende der Switch-Anweisung, das der Compiler prüft, ob alle Elemente die möglich sind, auch tatsächlich abgehandelt wurden.
@Component({
...
})
export class Template {
colors : 'red'|'blue'|'yellow'|'orange'= 'red';
}
@switch (colors){
@case ('red') {
<span>Rot</span>
}
@case ('blue') {
<span>Blau</span>
}
@case ('yellow')
@case ('orange') {
<span>helle Farbe</span>
}
@default never;
}
Arrow Functions
Mein Lieblings-Feature. Arrow Funktionen. Direkt im Template
<ul>
@for(e of elements1().filter(e => e.startsWith('a')); track e){
<li>{{ e }}</li>
}
</ul>
Neben all den großen Signal-Themen die in Angular 22 nun endlich production-ready sind, zeigen diese Features das man auch das alltägliche Entwicklerleben weiterhin verbessern möchte. Toll! Weiter machen!
