Unlocking the Power of `@let` in Angular 18: A Comprehensive Guide

Discover Angular 18's `@let` directive, a new feature that simplifies template logic by enabling direct variable declarations and reuse within HTML.

Angular 18 introduces a powerful new feature: the @let directive. This directive simplifies your template logic by allowing you to declare variables directly within your HTML, making your Angular components cleaner and more maintainable.

What is @let?

The @let directive allows you to define variables directly within your HTML templates, which can then be reused throughout the template. This feature is particularly useful for performing simple operations like string concatenation, calculations, or even handling asynchronous data streams with the | async pipe.

Basic Usage

Here’s an example of how to use @let:

<div>
  @let greeting = 'Hello, ' + name + '!';
  <h1>{{ greeting }}</h1>
</div>

In this example, we define a greeting variable that combines the string "Hello, " with a name variable, and then display it within an <h1> element.

Practical Examples

Calculating Total Prices

You can use @let to compute total prices in your template:

@for (product of products; track product.id) { @let totalPrice = product.price *
product.quantity;
<div>
  <p>{{ product.name }} - Total: {{ totalPrice | currency }}</p>
</div>
}

Here, totalPrice is calculated by multiplying product.price by product.quantity, and the result is formatted using the currency pipe.

Formatting Dates

Format dates directly in your templates using @let:

@for (event of events; track event.id) { @let formattedDate = (new
Date(event.date)).toLocaleDateString();
<div>
  <p>{{ event.name }} - Date: {{ formattedDate }}</p>
</div>
}

This snippet converts each event's date into a human-readable format.

Conditional Messages

Create conditional messages easily:

@for (user of users; track user.id) { @let statusMessage = user.isActive ?
'Active' : 'Inactive';
<div>
  <p>{{ user.name }} - Status: {{ statusMessage }}</p>
</div>
}

Here, the statusMessage variable is set based on the user.isActive condition.

Advanced Usage: Handling Async Data

One of the most powerful uses of @let is in handling asynchronous data:

<div>
  @let data = (data$ | async); @let processedData = data ? data.map(item =>
  item.value) : [];
  <ul>
    @for (item of processedData; track item) {
    <li>{{ item }}</li>
    }
  </ul>
</div>

In this example, data$ is an observable that is handled cleanly within the template, with @let making the process straightforward and readable.

Key Considerations

Assignability

Unlike JavaScript’s let, Angular’s @let directive creates variables that cannot be reassigned within the template. However, their values are recomputed whenever Angular’s change detection runs.

@let value = 1;
 
<!-- This will cause an error -->
<button (click)="value = value + 1">Increment Value</button>

Scope

Variables declared with @let are scoped to the current view and its descendants, which means they cannot be accessed by parent or sibling views.

@let topLevel = value;
 
<div>@let insideDiv = value;</div>
 
{{topLevel}}
<!-- Valid -->
{{insideDiv}}
<!-- Valid -->

Conclusion

The @let directive is a valuable addition to Angular 18, making template logic simpler and more intuitive. By allowing direct variable declarations within your HTML templates, it reduces the need for complex and repetitive code, thereby improving both readability and maintainability. Use @let for straightforward operations, and keep more complex logic within your component's TypeScript code.

Additional Reference

For more detailed information about the @let directive, check out the official Angular documentation: Local template variables.