Web framework Angular 18.1 extends syntax with @let

Seven weeks after the major version 18, the Angular team released the first minor release 18.1. As a highlight, the development team highlights the new syntax in a blog entry @let Which provides new possibilities for dealing with variables.

Advertisement

New features in Angular 18.1

on X (formerly Twitter) The Angular team announced a new release and announced features. These include new @let-Syntax support for current TypeScript version 5.5 and new properties browserUrl For NavigationBehaviorOptions As well as stability improvements and bug fixes.

Extended syntax with @let

New syntax @let Allows developers to define a variable within a component template and reuse its value throughout the template. This also fixes the problem”Template local variables” on GitHub, which opened in 2017 and is one of the most voted for by the community.

Like the Angular team in a blog entryAngular can handle complex JavaScript expressions, but until now it didn’t have an easy way to save the result of an expression and reuse it in a template. This is fixed by the new syntax, which looks like this:

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

with @let A variable can be defined and used according to Angular’s template syntax rules and conventions, for example:

@let name = 'Frodo';

Hello, {{name}}

As another example, the Angular team gives this:

Software-architektur.tv: Quality Storming with Michael Plod

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


@let user = user$ | async;

there are @let-Declarations are read-only and cannot be reassigned. Their values ​​are recalculated with each change detected. According to the development team, if developers try to write them directly, it will result in a type checking error.

More information on implementing the new Angular syntax can be found here on the official Angular blog. All changes in version 18.1 Show release notes on GitHub,

(May)