{"id":2109,"date":"2024-07-11T17:39:30","date_gmt":"2024-07-12T00:39:30","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=2109"},"modified":"2026-03-18T07:27:14","modified_gmt":"2026-03-18T14:27:14","slug":"let-for-local-variables-in-angular-views","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/let-for-local-variables-in-angular-views\/","title":{"rendered":"@let for local variables in Angular views"},"content":{"rendered":"\n

Angular 18.1 brought a new feature to our Angular templates: the ability to create local variables. Just like the new control-flow blocks<\/a> @if<\/code>, @for<\/code>, and @switch<\/code>, the new syntax uses the @<\/code> character with a new keyword: @let<\/code>.<\/p>\n\n\n\n

Here is an example:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

The above code displays 21 as the value of the Angular expression. Why is this helpful? In many cases, we deal with complex nested objects that translate into long, verbose expressions:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

With @let<\/code>, we can make things shorter:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Another major use case is when using the async pipe. I covered several tricks on how to use the async pipe<\/a> in the past, even introducing ngrxLet<\/code> as an alternative<\/a>, and all of these tricks can now be replaced with @let<\/code>. <\/p>\n\n\n\n

Here is the initial problem with async when dealing with data from an Observable that we need in several places: <\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

The above syntax is not only horrible, but it also multiplies subscriptions to the source Observable, which is even worse. <\/p>\n\n\n\n

Here is what we can do with @let<\/code> now:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

That’s a lot better. If the multiple ?<\/code> drive you crazy, you can do this instead:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

@let<\/code> variables are read-only and cannot be reassigned. They behave like the const<\/code> keyword in Javascript. The scope is also to the nearest block (which means view<\/a>, in the case of Angular templates), so in my above example, addr<\/code> is only available within the @if<\/code> block, invisible outside of it.<\/p>\n\n\n\n

You can play with my examples on Stackblitz here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Angular 18.1 brought a new feature to our Angular templates: the ability to create local variables. Just like the new control-flow blocks @if, @for, and @switch, the new syntax uses the @ character with a new keyword: @let. Here is an example: The above code displays 21 as the value of the Angular expression. Why […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,8,7],"tags":[],"class_list":["post-2109","post","type-post","status-publish","format-standard","hentry","category-angular","category-components","category-template-syntax"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2109","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=2109"}],"version-history":[{"count":4,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2109\/revisions"}],"predecessor-version":[{"id":2397,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2109\/revisions\/2397"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=2109"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=2109"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=2109"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}