DEV Community

Introduction to @let in Angular 18

Rodrigo Oler on May 21, 2024

Angular 18 has an exciting new feature under development for developers: the @let directive. This tool will help you create variables quickly and e...
Collapse
 
smits profile image
SmitS

I'm wondering how will it impact component rendering. I used to use the getter method but that'd render the component any time any changes detected. I guess this is kind of same but just seems bit cleaner?

Collapse
 
oler profile image
Rodrigo Oler

Using @let is a more straightforward and cleaner approach to defining temporary or calculated variables in the template, avoiding the need for getters in the component class. Both methods—getters and @let—have similar reactive behavior and impact the component rendering equivalently when monitored properties change. The choice between them depends on style preferences and code organization.

Collapse
 
yutamago profile image
Yutamago • Edited

Is it really a choice if it might be a bad practice?

Some of these examples look like they should've been written as pure pipes.
It's a little bit concerning that you didn't mention them at all.

Also the use of the legacy ngIf, ngFor etc.
Angular 17 brought us @if and @for .

Thread Thread
 
oler profile image
Rodrigo Oler

I updated the article to include @for and @if, but the main focus of the article is the @let directive. My initial idea was to highlight only @let for people coming from previous versions, as @for and @if are new. In any case, I've adjusted the article. Thank you!

Collapse
 
pppdns profile image
Denes Papp

@let has been included in Angular v18.1.0.
github.com/angular/angular/release...

Here are the Github links if anyone is interested:

github.com/angular/angular/pull/56715
github.com/angular/angular/pull/55848

This closes a 7 year old issue:
github.com/angular/angular/issues/...

Collapse
 
oler profile image
Rodrigo Oler

Wonderful, I will later make a note about your comment and inform that the @let has already been merged. Thank you very much for the comment!

Collapse
 
jonasthuvessonwinberg profile image
Jonas Thuvesson Winberg • Edited

Suggestion:
Maybe use @if instead of *ngIf, since you are using new template syntax (@let). Right now it's mixed, and looks a bit messy imo.

Collapse
 
jonasthuvessonwinberg profile image
Jonas Thuvesson Winberg

Same with the for-loops

Collapse
 
oler profile image
Rodrigo Oler

I've updated the article to include @for and @if, but my initial focus was to highlight the @let directive. Originally, I wrote the article with the intention of emphasizing @let.

Collapse
 
oler profile image
Rodrigo Oler

Makes sense. When I was creating it, I only focused on showing the @let. I will update the new syntax for if and loops during the week. Thanks for the suggestion.

Collapse
 
geromegrignon profile image
Gérôme Grignon

You should update the introduction as 'Angular 18 has brought' is wrong. This feature is not even merged yet.

Collapse
 
spock123 profile image
Lars Rye Jeppesen

You're right, except it's now merged but not yet part of a distributed package.

Collapse
 
oler profile image
Rodrigo Oler

I’ve adjusted it here and highlighted this information. thanks!

Collapse
 
han_005 profile image
Han • Edited

What happen if in component we define a property that have same name with name of variable at template by @let?

Collapse
 
oler profile image
Rodrigo Oler

The fullName used in the {{ fullName }} interpolation refers to the locally scoped variable created by the @let directive, not the component's property. As a result, it will display "Hello, John Doe."

Without the @let directive, the template would default to using the fullName property from the component, resulting in "Hello, Some other value."

To summarize, the local variable defined by @let has priority within its scope and will override any component property of the same name in the template.

Collapse
 
spock123 profile image
Lars Rye Jeppesen

absolutely amazing! long-time wanted feature

Collapse
 
jangelodev profile image
João Angelo

Hi Rodrigo Oler,
Top, very nice and helpful !
Thanks for sharing.

Collapse
 
host510 profile image
Mikhail

It can be really convenient when working with observable and async pipe.

Collapse
 
keatkeat87 profile image
keatkeat87

who is telling you Angular Template supports the arrow function?

Collapse
 
npetri profile image
Nico

Did you test the last example recently? Bcs if gives u an Parser Error: Bindings cannot contain assignments at... error at the processedData definition.