Angular v18+ — Introducing @let syntax: A New Way to Declare Variables and do Logic in Templates 🔥🚀

Here we are again with another article that dives into the new features of Angular v18.

In this article, you will explore, understand the pros and cons, and learn how to use the new @let template syntax. This powerful feature comes with great responsibility, as Uncle Ben would say.

🧠 What’s @let syntax?

As TypeScript developers, we are familiar with creating variables using var, const, and let. In this scenario, @let works similarly, but with one key difference: you can now create variables directly at the template level.

💡 How to use the @let Syntax in Angular?

Nothing is better to see some code in order to understand something.

Let’s see a basic example:

@let name = 'Giorgio';

<label>{{ name }}</label>

As you might expect, the content of the variable will be rendered correctly:

<label>Giorgio</label>

This opens up many new ways to handle our code, allowing us to move some logic directly within the template itself. With @let, you can declare variables and use them throughout your template.

🔍 Advanced usage of @let

Of course, the power of @let does not stop here. You can also perform conditional logic:

@let isAuth = authService.isAuth();
@let username = authService.getUsername();

@let message = isAuth ? 'Welcome, ' + username + '!' : 'Welcome Anonymus!'

<label>{{ message }}</label>

From this simple example, you can already see how much cleaner our code can be. Let’s take it a step further.

🧮 Working with Arrays

Sometimes you want to map or filter your arrays. Generally, you would write a function for that, save the output within the TypeScript file, and use it in the template. Now, you can do it as follows:

@let onlineUsers = users.filter(({ status }) => status === 'online');

@for(user of onlineUsers; track user.id) {
  <label>{{ user.name }} {{ user.surname }}</label>
}

🔄 Working with the Angular Async Pipe

If you’ve worked with Angular, you’ve likely used the async pipe. Here's how you can combine it with @let:

@let user = user$ | async;

<per>{{ user | json }}</pre>

@let userPosts = user.posts || [];

@for(post of userPosts; track post.id) {
  <label>{{ post.title }}</label>
  <p>{{ post.content }}</p>
} @empty {
  <label>No post to show!</label>
}

In this example, @let is used to handle asynchronous data and iterate over user posts. The code is cleaner and keeps the logic within the template, reducing the need for additional component code.

However, be careful when using @let in combination with the async pipe, as it may cause some performance issues.

To avoid this, declare a variable to handle the subscription and use that variable wherever needed, as shown in the example above.

This approach ensures a single subscription and avoids multiple re-evaluations, which can improve performance.

✅ Conclusions

The @let syntax in Angular v18 offers a powerful way to declare variables and handle logic directly in templates. It simplifies the code and enhances readability, making it easier to manage dynamic and conditional content. However, with great power comes great responsibility, so use it wisely to keep your templates clean and maintainable.

---

Thank you for staying with me, and I hope everything was clear. Feel free to explore more of my articles and follow me on LinkedIn!

See you in the next one!

Best, G.