Local Template Variables in Angular with @let

Angular’s @let syntax is a new feature for creating local template variables. Learn how @let works and what it unlocks for our Angular templates.

Angular’s template syntax has always been powerful, with capabilities like @if, @for and @switch making it easy to create dynamic, responsive interfaces (see Angular Basics: Controlling the Flow of Your Angular Templates).

While these template features are versatile, one key limitation remained: the inability to define reusable variables within the template. Enter Angular’s @let syntax—a new feature for creating local template variables that enhance clarity and maintainability. In this article, we’ll dive into how @let works and what it unlocks for our Angular templates.

Angular’s Template Syntax

Angular templates have always supported complex JavaScript expressions, allowing developers to bind data, interact with observables using the | async pipe, and dynamically display content. However, there has historically been no straightforward way to store an expression’s result and reuse it within the same template.

Let’s take a look at a simple example:

<h1>{{ user.firstName }} {{ user.lastName }}</h1>
<p>Welcome, {{ user.firstName }}!</p>

In the above code, user.firstName is evaluated twice. While this may not seem problematic for small templates, this repetition could lead to inefficiencies and reduced code clarity when dealing with larger templates or expensive expressions. Developers often worked around this limitation by moving logic to the component or using directives to define variables. Both approaches add complexity and reduce the separation of concerns between templates and components.

Introducing @let

The new @let syntax in Angular solves this problem by enabling developers to declare and reuse variables directly within templates. The syntax resembles JavaScript’s let syntax but is specifically designed for Angular templates. A variable declared with @let is scoped to the current view and its descendants, and its value is automatically kept up-to-date by Angular’s change detection.

With @let, the above template example can now be revised to:

@let firstName = user.firstName;
<h1>{{ firstName }} {{ user.lastName }}</h1>
<p>Welcome, {{ firstName }}!</p>

In the above example, the @let syntax declares a firstName variable, which contains the value of the user’s first name. The result is reused in the template without recalculating the expression.

A common use case for @let is working with the | async pipe. Previously, developers would commonly use *ngIf to handle asynchronous data:

<div *ngIf="user$ | async as user">
  <h1>Hello, {{ user.name }}</h1>
</div>

With @let, this becomes cleaner by reducing nesting and improving readability.

@let user = user$ | async;
@if (user) {
  <h1>Hello, {{ user.name }}</h1>
}

The introduction of @let in Angular templates brings some helpful advantages while presenting some considerations. It simplifies template logic by allowing developers to define variables directly in the template, reducing redundancy and improving readability. This makes it especially useful for handling conditions, calculations and asynchronous data, where repetitive expressions complicate code.

However, @let is sometimes best suited for straightforward logic. Components or shared services can provide a more reusable and maintainable solution when dealing with complex or multi-step processes. In performance-sensitive scenarios, such as deeply nested templates or loops, @let may require careful consideration, as frequent reevaluations during change detection can impact efficiency.

Furthermore, because logic defined with @let remains tied to the specific template, it lacks the reusability offered by functions or utilities shared across components (i.e., parent views, siblings).

All in all, the @let syntax is a useful add-on syntax for Angular templates, offering a simple yet effective way to define and reuse variables. By reducing redundancy and improving readability, it enables developers to write cleaner and more maintainable code. However, like any tool, it’s important to use @let judiciously and reserve it for scenarios where it truly simplifies the template.

For a more detailed reading on @let, be sure to check out the following resources!

• Local template variables with @let | Angular.dev
• Introducing @let in Angular | Angular Blog