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...

Read full post

Smit Shah • May 23

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?

Rodrigo Oler • May 23

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.

Yutamago • May 27 • 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 .

Rodrigo Oler • Jun 12

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!

Jonas Thuvesson Winberg • May 27 • 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.

Jonas Thuvesson Winberg • May 27

Same with the for-loops

Rodrigo Oler • Jun 12

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.

Rodrigo Oler • May 27

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.

Han • May 22 • Edited

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

Rodrigo Oler • May 22

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.