Declare Variables in Templates: Angular's New @let Declaration (v18.1)

With @let, new in Angular v18.1, we can declare and assign local variables in our template. That's right, I said template!

In this video, we'll look at the @let declaration syntax, walk through some common scenarios, and evaluate some early best practices for using @let.

*Links*

*Content*
00:00 @let declaration
00:30 @let syntax
01:09 Sample application
01:34 Minimize duplicate expressions
03:00 Pipe
03:36 Type narrowing of signals
05:03 Variable scope
06:07 Style attributes
07:59 Calculations?
09:13 Calling a method?
10:06 Best practices
11:34 Wrap up

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
😊About Me
Hey! I'm Deborah Kurata
I'm a software developer and YouTube content creator. I speak at conferences such as VSLive and ng-conf. I write articles for freeCodeCamp. And I'm a Pluralsight author with courses in the top 10 most popular (out of 7,000+) for over 5 years. For my work in support of software developers, I've been recognized with the Microsoft Most Valuable Professional (MVP) award, and I'm a Google Developer Expert (GDE).

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
#angular
#angulartutorials
#angulartutorial
#angulardevelopers
#angularbestpractices
#angular18newfeatures
#angular18newfeature
#angular18features
#angularletdeclaration
#angularnewfeatures
#featuresinangular18
#declarevariableintemplate
#angularlatestfeatures
#angularfeaturesandupdates
#angular18featuresandupdates

[patriksimon]

It's almost unbelievable how helpful your tutorials are to me 🏅

[richarddefortune]

This is a much needed tool, particularly when writing logic for [ngClass]. @let will free the HTML markups from some styling distractions.

Great video as usually.

[Matrium]

Finally real declarative variables. NgRx had a structural directive *ngrxLet for years, but there was no good way to do this with vanilla Angular.
Great video!!

[vic_shine]

OMG, I love your explanation so much, Deborah ❤ please make more videos about Angular built-in features 😊

[josedejesusbarajaschavez]

Interesting, I feel can be very useful but using let carefully. Thanks Deborah.

[НикитаКлусович]

I can't believe that they finally figured out that it is a good idea to add let to a template) It seems to me that problems with multiple usage of similar data exist since angular appeared) New control flow is a real game changer)

[deadlyecho]

Love you Deborah, alawys nice hearing your voice, keep up the good content as always ✨️

[prasoon]

Whenever I see your video, it directly fit inside my mind. Your explanation is awesome.. hats off to you ❤

[Sandeepkishor]

You always come up with great content!
Very much informative video!!!

[chellaack]

Awesome Thanks, creating a obsession for next video!

[manit]

Looking more and more like razor syntax.

[KiffinGish]

As always, it's a fantastic video, thanks! However, the way you define 'qtyStyle' with curly brackets is unclear. How does it work?

[jeanfrancoisgamache]

Thanks for you great vidéos.
That sounds interesting, but is it a good practice? Unit tests with that? There's a risk that the logic will end up in two different places, in the TS code and in the template.
Like you said we have to be very carffully with that

[underTaker-dq]

As soon as, I saw the classic snack example I came here to have some and by the end of the video, I was full (in my head)

[EmilioDegiovanni]

Great video! is it possible destructuring object/array with @let?

[such]

Thanks to the great explaination, However can you help to understand if we can call method in template with new block scope concept

[marshallgraphic]

Nice, I didn't know this feature existed

[LeungWong]

Is there any reason why Angular recommend to use @let over "as" syntax? To me they serve almost the same purpose in that case, and it is more about stylistic opinion.

[mansoorabdullah]

within the component.ts also we can do the same right? using a getter or a computed signal variable, what's the benefit from @let caparing to that?

[andikusnadi]

May I know, for ngx translate is the best?