Angular

Using @let in Angular Templates – Cleaner and Smarter Way to Handle Variables

Angular has come up with a new feature in its template syntax — the @let keyword. This feature helps make our code cleaner and easier to read, especially when dealing with ngIf, ngFor, and other structural directives.

In this blog, I will explain how to use @let in your HTML template with a simple example.

What is @let?

@let is a new and easy way to create local variables directly in your Angular HTML template. It was added in the latest Angular versions and is now commonly used. It helps make your code look cleaner and easier to understand, without using any complex syntax.

Earlier, we used this syntax.

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

Now with @let, we can write the same like this.

@let currentUser = user;
<div *ngIf="currentUser">
  {{ currentUser.name }}
</div>

It looks like JavaScript, but it works inside Angular templates.

1. Simple Example of @let

Let’s say we have a list of users and we want to display only if users exist.

app.component.ts

export class AppComponent {
  users = [
    { name: 'Ishaan', age: 28 },
    { name: 'Atharv', age: 30 },
  ];
}

app.component.html (Using @let)

@let allUsers = users;

<div *ngIf="allUsers.length > 0">
  <h3>User List</h3>
  <ul>
    <li *ngFor="let user of allUsers">
      {{ user.name }} - {{ user.age }}
    </li>
  </ul>
</div>

Here we assigned users to allUsers using @let, and reused it multiple times. It makes the code more readable and avoids repeating the variable.

2. Using @let with async

Let's say you're fetching user data from an API and returning it as an Observable.

import { Component } from '@angular/core';
import { of, delay } from 'rxjs';

@Component({
  selector: 'app-root',
  standalone: true,
  templateUrl: './app.component.html'
})
export class AppComponent {
  user$ = of({ name: 'Atharv', email: '[email protected]' }).pipe(delay(1000));
}

app.component.html

@let user = user$ | async;

<div *ngIf="user">
  <h2>User Profile</h2>
  <p>Name: {{ user.name }}</p>
  <p>Email: {{ user.email }}</p>
</div>
  • Here, user$ is an Observable that emits a user object.
  • @let user = user$ | async; waits for the value and stores it in the user variable.
  • *ngIf="user" ensures the DOM renders only after data is available.
  • This is especially useful when you have multiple async pipes in the template — using @let helps avoid repeating | async everywhere.

Benefits of @let

  • Makes HTML template code clean and easy to read
  • Avoids writing the same expression multiple times
  • Works like JavaScript let, but inside Angular HTML templates
  • Useful when working with complex conditions (*ngIf, *ngFor, etc.)
  • Helps store a value once and reuse it in the same template
  • Improves performance by not repeating function calls or logic
  • Makes the template more understandable for other developers
  • Works well with the async pipe to store and reuse observable values
  • Prevents calling async multiple times in the same template

Summary

In this blog, we explored how the new @let syntax in Angular makes our templates cleaner, more readable, and easier to manage. Whether you are working with ngIf, ngFor, or async pipes, @let helps you declare and reuse variables just like JavaScript — but directly in your HTML.

This small feature can save a lot of time and reduce repetitive code, especially in large Angular applications.

Start using @let today to write smarter templates in Angular! ??

If you found this helpful, feel free to like, share, or drop your thoughts in the comments.
Membership not found