Angular 18 has an exciting new feature under development for developers: the @let directive. This tool will help you create variables quickly and e...
For further actions, you may consider blocking this person and/or reporting abuse
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?
Using
@letis 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—gettersand@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.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 .
I updated the article to include
@forand@if, but the main focus of the article is the@letdirective. My initial idea was to highlight only@letfor people coming from previous versions, as@forand@ifare new. In any case, I've adjusted the article. Thank you!@lethas 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/...
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!
Suggestion:
Maybe use
@ifinstead of*ngIf, since you are using new template syntax (@let). Right now it's mixed, and looks a bit messy imo.Same with the for-loops
I've updated the article to include
@forand@if, but my initial focus was to highlight the@letdirective. Originally, I wrote the article with the intention of emphasizing@let.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.
What happen if in component we define a property that have same name with name of variable at template by @let?
The
fullNameused in the{{ fullName }}interpolation refers to the locally scoped variable created by the@letdirective, not the component's property. As a result, it will display "Hello, John Doe."Without the
@letdirective, the template would default to using thefullNameproperty from the component, resulting in "Hello, Some other value."To summarize, the local variable defined by
@lethas priority within its scope and will override any component property of the same name in the template.You should update the introduction as 'Angular 18 has brought' is wrong. This feature is not even merged yet.
I’ve adjusted it here and highlighted this information. thanks!
You're right, except it's now merged but not yet part of a distributed package.
absolutely amazing! long-time wanted feature
It can be really convenient when working with observable and async pipe.
Hi Rodrigo Oler,
Top, very nice and helpful !
Thanks for sharing.
who is telling you Angular Template supports the arrow function?
Did you test the last example recently? Bcs if gives u an
Parser Error: Bindings cannot contain assignments at...error at the processedData definition.