Template Local Variable with @let Block | @let in Angular

  @let directive, enhancing template syntax by allowing variable declarations directly within HTML templates. This feature simplifies template logic by providing more flexibility and clarity, reducing the need for complex workarounds.

👉👉👉Angular18 new features

Template Local Variable with @let Block: A new feature in templates allows using the @let directive to declare local variables within templates, simplifying data binding and improving template readability.

Without @let variable: Creating local variables within templates was often verbose and required using additional directives or components.

Previously, you would often use directives ngIf combined with the as keyword to declare and use a variable within a template. For example:

<ng-container *ngIf="user as currentUser">
  <div>{{ currentUser.name }}</div>
</ng-container>

C#

While this method works, it has limitations, especially when dealing with falsy values like 0. If the value is 0, the content inside ngIf won't render because 0 is considered falsy.

with @let variable:

Angular 18 introduces the @let directive, which simplifies the declaration of local variables within templates.

The @let directive allows you to declare a variable directly within the template, independent of its truthiness. This makes the template logic more straightforward and expressive. Here's how you can use @let:

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

C#

<div>
  @let points = (points$ | async) ?? 0;
  <h1>You have: {{ points }} points!</h1>
</div>

C#

This ensures that even if points is 0, the content will still render correctly.

Benefits and Use Cases

1. Handling Falsy Values: As shown in the example, @let this helps manage cases where falsy values might disrupt the template rendering logic.

2. Complex Expressions: Simplify templates by storing complex expressions in a variable.

@let someField = someService.someSignal().someProperty.someOtherProperty;
<div>{{ someField }}</div>

C#

3. Control Flow Directives: Combine @let with control flow directives like @if to streamline logic.

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

C#

4. Iterating with @for: Reduce code duplication in loops.

<mat-selection-list>
  @for (item of items(); track item.id) {
    @let isSelected = item.id === selectedId();
    <mat-list-option [selected]="isSelected" [class.selected]="isSelected">
      {{ item.text }}
      @if (isSelected) {
        <span>(selected)</span>
      }
    </mat-list-option>
  }
</mat-selection-list>

C#

5. Ternary Operators and Math: Use @let with operators to make calculations directly in templates.

<div>
  @for (game of games; track game.id) {
    @let points = calcPoints(game.points > 0 ? game.points : 0);
    <h1>You have: {{ points }} points!</h1>
  }
</div>

C#

Another Example

Calculate the Item Price

<div *ngFor="let item of items">
  @let totalPrice = item.price * item.quantity;
  @let date = (new Date(item.date)).toLocaleDateString();
  <p>{{ item.name }} - Total: {{ totalPrice }} on date {{date}}</p>
</div>

C#

Benefit:

This new syntax makes templates more readable and easier to manage by reducing boilerplate code and improving data-binding practices​

The @let the directive in Angular 18 significantly enhances template flexibility and readability. It reduces the need for complex directives and workarounds, making code cleaner and more maintainable​