Understanding the new Angular @let syntax

The Angular community has been asking for this feature for many years. Angular has now extended the built-in template syntax with a new way to define variables directly within the template, allowing developers to create and use variables inside the HTML.

Angular's template syntax has always supported complex operations, making development easier. However, it has been limited in certain aspects, particularly when it comes to reusing expressions across the template. Developers have often resorted to using directives or other workarounds to overcome these limitations. Now, with the introduction of @let, we have a native solution that simplifies this process.

Introducing the let syntax

The @let syntax allows you to define variables directly in the template and reuse them throughout. This new feature provides a more ergonomic and straightforward way to handle variables in your templates. Let's take a look at a basic example:

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

In this example, the variable name is defined and used seamlessly within the template. This can be especially powerful in more complex templates where you need to reuse values derived from expressions.

Practical examples and use cases

Here are a few more examples of how @let can be used in your Angular templates:

1. Using with a template variable referencing an element:

    <input #name>
    @let greeting = 'Hello ' + name.value;
    <p>{{greeting}}</p>
   

2. Using with an async pipe:

    @let user = user$ | async;
    <h1>Welcome, {{user.name}}</h1>
   

These examples demonstrate how @let can streamline your templates by reducing redundancy and improving readability.

Scope and limitations

When using @let, it's important to remember that these variables are scoped to the current view and its descendants. This means that they cannot be accessed by parent or sibling views. For example:

@let topLevel = value;

@if (condition) {
  @let nested = value;
}

<div *ngIf="condition">
  @let nestedNgIf = value;
</div>

<!-- Valid -->
{{topLevel}}

<!-- Error: Not accessible outside @if or *ngIf scopes -->
{{nested}}
{{nestedNgIf}}

Additionally, @let declarations are read-only and cannot be reassigned. Their values will be recomputed on each change detection, such as when an async pipe's value changes. Attempting to reassign them will result in a type-checking error.

@let value = 10;
<!-- Error: `value` is not assignable -->
<button (click)="value = value + 1">Change the value</button>

Syntax Definition

Let's break down the syntax for @let:

1. The @let keyword.

2. Followed by one or more whitespaces (no new lines allowed).

3. Followed by a valid JavaScript name and optional whitespaces.

4. Followed by the equals (=) symbol and optional whitespaces.

5. Followed by an Angular expression, which can span multiple lines.

6. Terminated by the semicolon (;) symbol.

Conclusion

The introduction of @let in Angular represents a significant enhancement in the way developers can manage variables within templates. This feature not only improves code readability but also provides a more intuitive and efficient method of working with template variables. As Angular continues to evolve, features like @let demonstrate the framework's commitment to optimising the developer experience.