🧠 Understanding `@let` in Angular Templates: A Complete Guide

Angular’s template syntax is powerful—and with the introduction of the @let in Angular's syntax, it becomes even cleaner and more expressive. In this post, we’ll explore what @let is, how to use it, and some practical examples to help you get started.

🚀 What is @let?

The @let allows you to declare local variables in your Angular template that can be reused throughout the same scope or nested scopes—much like how you'd use let in JavaScript or TypeScript.

Syntax:

@let variableName = value;

✅ Simple Examples

Let’s start with a few basic usages.

@let count = 1;
@let countryList = country$ | async;

Here, count is a simple number, and countryList is assigned the async value of an observable.

🧪 Key Rules

• Variables can only be used after they’ve been declared.
• They’re accessible within the same scope or nested scopes.
• Declaring a variable inside a block (like @if) will limit its accessibility to that block.

📦 Usage Example

Let’s see a more practical scenario involving a list of countries.

@let text = 'Hello';
<div class="country-list">
  @if (country$ | async; as countryList) {
    @for (country of countryList; track $index;
      let index = $index, even = $even, odd = $odd,
      last = $last, first = $first, count = $count) {

      <div class="country">
        <div class="label">
          <span>{{ index }} : {{ country.flag }}</span>
          <span>{{ country.name.common }}</span>
        </div>
        <hr />
      </div>
    }
    <span>text: {{ text }}</span>
  }
</div>

You can also bind values from the component’s ts file.

In the component:

date = new Date().toDateString();

In the template:

@let time = date;

<div class="country-list">
  @if (country$ | async; as countryList) {
    @for (country of countryList; track $index;
      let index = $index, even = $even, odd = $odd,
      last = $last, first = $first, count = $count) {

      <div class="country">
        <div class="label">
          <span>{{ index }} : {{ country.flag }}</span>
          <span>{{ country.name.common }}</span>
        </div>
        <hr />
        <span>time: {{ time | json }}</span>
      </div>
    }
  }
</div>

🧭 Scope Behavior: @let Inside vs. Outside

✅ Declared Outside a Scope

@let currentDate = date;
<div class="country-list">
  @if (country$ | async; as countryList) {
    @for (country of countryList; track $index;
      let index = $index, ... ) {
      <div class="country">
        ...
        <span>time: {{ currentDate | json }}</span>
      </div>
    }
  }
</div>

{{ currentDate }} <!-- ✅ This works -->

Since @let currentDate is declared at the top level, it is available throughout the entire template.

❌ Declared Inside a Scope

@if (true) {
  @let currentDate = date;
  ...
}

{{ currentDate }} <!-- ❌ Error: Property 'currentDate' does not exist -->

When you declare @let inside a scope (like @if), it is not accessible outside that block.

❌ Used Before Declaration

<div class="country-list">
  {{ currentDate }} <!-- ❌ Error -->
  @let currentDate = date;
  ...
</div>

Just like in JavaScript, using a variable before it’s declared results in an error.

🧵 Conclusion

Using @let can simplify your Angular templates by removing redundant pipes and enabling scoped variable reuse. But be mindful of where you declare your variables to avoid scope-related issues.

Have you tried @let in your Angular apps yet? Let me know in the comments how you're using it or if you ran into any challenges!

📌 If you found this helpful, don’t forget to follow for more Angular tips!

✍️ Author: Vetriselvan

👨‍💻 Frontend Developer | Code Lover | Exploring Angular’s future