Angular’s @let — A Simpler Way to Reuse Values in Templates

Angular just got a lot more template-friendly. The new @let feature brings a much-needed way to define and reuse variables directly in your HTML templates — no more cluttered expressions or awkward workarounds.

If you’ve ever wished for a cleaner way to avoid repeating the same logic in multiple bindings, @let is the answer. Let’s break down how it works and why it’s a solid upgrade to Angular templating.

---

The Problem: Repeated Logic in Templates

In traditional Angular templates, you could write complex expressions — but reusing them meant either repeating yourself or creating custom directives just to keep the template clean. It worked, but it wasn’t ideal.

---

The Fix: @let Syntax

With @let, you can declare a variable in the template and reuse it wherever needed.

@let variableName = expression;

This variable behaves just like any other value in your template and is read-only by default.

@let name = 'Frodo';

<h1>Dashboard for {{name}}</h1>
<p>Hello, {{name}}</p>

Much cleaner than repeating 'Frodo' everywhere or pushing the value into a component class just to reuse it.

Working with Template References

You can use @let with template reference variables too:

<input #name>
@let greeting = 'Hello ' + name.value;

<p>{{greeting}}</p>

Integrating with Async Pipes

Handling observables in the template just got neater:

@let user = user$ | async;

<p>Welcome, {{user.name}}</p>

---

Scope Rules to Know

• Variables declared with @let are scoped to the view they’re declared in.
• You can’t access @let variables outside their own block or across siblings.

Example:

@let topLevel = 'value';

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

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

<p>{{topLevel}}</p>        <!-- ✅ Valid -->
<p>{{nested}}</p>          <!-- ❌ Error -->
<p>{{nestedNgIf}}</p>      <!-- ❌ Error -->

---

Limitation: @let Is Read-Only

You can’t reassign a @let variable — it’s meant for defining static or derived values, not for mutating state.

@let count = 10;

<!-- ❌ Won’t work: count is immutable -->
<button (click)="count = count + 1">Increment</button>

---

Final Thoughts

The @let syntax is a small but powerful enhancement that makes Angular templates much more readable and expressive. It reduces redundancy, eliminates the need for boilerplate directives, and lets you focus on your UI logic without bloating your component code.

If you’re already using Angular v17 or later, start using @let to simplify your templates — you’ll notice the difference right away. Want help cleaning up existing template logic using @let? Just ask!