Webframework Angular 18.1 erweitert die Syntax um @let

Sieben Wochen nach der Hauptversion 18 hat das Angular-Team das erste Minor Release 18.1 veröffentlicht. Als Highlight hebt das Entwicklungsteam in einem Blogeintrag die neue Syntax @let hervor, die neue Möglichkeiten im Umgang mit Variablen bietet.

Neue Features in Angular 18.1

Auf X (vormals Twitter) hat das Angular-Team das neue Release verkündet und die Features bekannt gegeben. Dazu zählen neben der neuen @let-Syntax der Support für die aktuelle TypeScript-Version 5.5 und die neue Property browserUrl für NavigationBehaviorOptions sowie Stabilitätsverbesserungen und Bugfixes.

Erweiterte Syntax mit @let

Die neue Syntax @let erlaubt es Entwicklerinnen und Entwicklern, innerhalb eines Komponenten-Templates eine Variable zu definieren und deren Wert über das Template hinweg wiederzuverwenden. Sie behebt zudem das Issue "Template Local Variables" auf GitHub, das 2017 eröffnet wurde und zu jenen mit den höchsten Upvotes durch die Community zählt.

Wie das Angular-Team in einem Blogeintrag ausführt, kann Angular zwar mit komplexen JavaScript-Ausdrücken umgehen, doch es fehlte bislang eine reibungslose Möglichkeit, das Ergebnis eines Ausdrucks zu speichern und über das Template hinweg wiederzuverwenden. Das behebt die neue Syntax, die wie folgt aussieht:

@let name = value; // where value is a valid Angular expression

Mit @let lässt sich eine Variable definieren und wie erwartet gemäß Angulars Template-Syntax-Regeln und -Konventionen verwenden, beispielsweise:

@let name = 'Frodo';
<h1>Dashboard for {{name}}</h1>
Hello, {{name}}

Als weiteres Beispiel gibt das Angular-Team dieses an:

<!-- Use with a template variable referencing an element -->
<input #name>

@let greeting = 'Hello ' + name.value;

<!-- Use with an async pipe -->
@let user = user$ | async;

Dabei sind @let-Deklarationen read-only und lassen sich nicht neu zuweisen. Ihre Werte werden bei jeder Change Detection neu berechnet. Würden Developer versuchen, sie direkt zu schreiben, würde das zu einem Type-Checking-Fehler führen, so das Entwicklungsteam.

Online-Konferenz zu React

Am 17. Oktober 2024 präsentiert die Online-Konferenz React 19 Day von dpunkt.verlag und iX die neuen Features der beliebten JavaScript-Bibliothek. Der Thementag im Rahmen der enterJS zeigt Teilnehmenden, wie sie das Optimum aus der neuen Version herausholen können und wie moderne Webentwicklung mit React 19 ihre Anwendungen besser macht. Auszug aus dem Programm:

• Wie Fullstack-React unser Leben verändert
• React 19 glänzt! So schön neu! Wirklich alles?
• React Compiler: Enhancing Developer Experience Without Compromising Performance

Frühbuchertickets sind bis zum 25. September verfügbar.

Weitere Informationen zum Anwenden der neuen Angular-Syntax finden sich im offiziellen Angular-Blog. Alle Änderungen in Version 18.1 zeigen die Release Notes auf GitHub.

(mai)