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

Рет қаралды 4,648

Күн бұрын

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
Code: stackblitz.com/~/edit/let-dec...
KZfaq video: "Angular's New Template Syntax: Control Flow": • Angular's New Template...
Pre-release Article: itnext.io/template-local-vari...
Pre-release Article: netbasal.com/exploring-angula...
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 KZfaq 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).
View my KZfaq content: / @deborah_kurata
Contact me on Twitter: / deborahkurata
Find my Pluralsight courses: www.pluralsight.com/profile/a...
Access my freeCodeCamp articles: www.freecodecamp.org/news/aut...
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
#angular
#angulartutorials
#angulartutorial
#angulardevelopers
#angularbestpractices
#angular18newfeatures
#angular18newfeature
#angular18features
#@let
#angularletdeclaration
#@letinangular
#@letinangular18.1
#angularnewfeatures
#featuresinangular18
#declarevariableintemplate
#angular@let
#angularlatestfeatures
#whatis@letinangular
#angularfeaturesandupdates
#angular18featuresandupdates
#angular@letsyntax

Пікірлер: 79

@patriksimon3551 25 күн бұрын

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

@deborah_kurata 25 күн бұрын

That's wonderful to hear. Thank you so very much! 😊

@richarddefortune1329 26 күн бұрын

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.

@deborah_kurata 26 күн бұрын

Yes! I wasn't sure about it when I first heard of it ... but now that I'm using it I'm finding it to be very useful.

@Matrium0 26 күн бұрын

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

@deborah_kurata 26 күн бұрын

Thanks! Yep! I really liked *ngrxLet when using NgRx. I was glad to see this added.

@user-gz9ky5zg7k 25 күн бұрын

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)

@deborah_kurata 25 күн бұрын

Yep! 😊

@deadlyecho 26 күн бұрын

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

@deborah_kurata 26 күн бұрын

That is so very kind of you to say. Thank you!

@ErickCcsVzla 25 күн бұрын

Excellent. Thank you for the video 😊

@deborah_kurata 25 күн бұрын

Great! Thanks!

@Sandeepkishor123 26 күн бұрын

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

@deborah_kurata 26 күн бұрын

Thank you! 😊

@rs4267 26 күн бұрын

Thank you for your courses 😊

@deborah_kurata 26 күн бұрын

Hope the posts are helpful. Thank you!

@josedejesusbarajaschavez1374 26 күн бұрын

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

@deborah_kurata 25 күн бұрын

Yes! It seems like something very useful that can easily be misused.

@prasoon2510 26 күн бұрын

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

@deborah_kurata 26 күн бұрын

Thank you so much 😀 Great to hear that they are useful!

@prasoon2510 24 күн бұрын

@@deborah_kurata can you create a video or playlist for creating a dynamic form with json, and use control value accessor??

@xEnergyGamingHD 26 күн бұрын

as always, amazing!

@deborah_kurata 26 күн бұрын

Thank you!

@chellaack1644 26 күн бұрын

Awesome Thanks ,creating a obsession for next video!

@deborah_kurata 26 күн бұрын

Excellent! Thank you! 😊

@vic_shine 25 күн бұрын

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

@deborah_kurata 25 күн бұрын

Thank you so much! If you haven't seen them ... I have a playlist of Angular topics here: kzfaq.info/sun/PLErOmyzRKOCrzJ9zUEGgC1zVzVGt3hMmV And a playlist of signal features here: kzfaq.info/sun/PLErOmyzRKOCr07Kcnx75Aqh6PWSbIokPB

@iuliusciorica282 26 күн бұрын

A big ❤️ thank you!

@deborah_kurata 26 күн бұрын

Thank you so much for watching!

@Fandikusnadi1979 20 күн бұрын

The best to learn.

@deborah_kurata 12 күн бұрын

Thank you! (Or was this a question?)

@daviduntama 25 күн бұрын

Muy interesante, saludos Deborah

@deborah_kurata 25 күн бұрын

Gracias! 😊

@DejanFilipov-gv8qz 18 күн бұрын

Teacher💙

@towercontrol4450 26 күн бұрын

Thanks!

@deborah_kurata 26 күн бұрын

😊

@sivuyilemagutywa5286 5 күн бұрын

This is good

@deborah_kurata 5 күн бұрын

Thank you!

@manit77 24 күн бұрын

Looking more and more like razor syntax.

@deborah_kurata 21 күн бұрын

Yeah, I thought so to. Between that and the TypeScript syntax, Angular seems like the person JavaScript framework for anyone knowledgeable in .NET.

@user-wk2ck7xi8p 26 күн бұрын

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)

@deborah_kurata 26 күн бұрын

What I great metaphor! I hadn't thought about that. LOL. Thank you!

@KiffinGish 25 күн бұрын

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

@deborah_kurata 25 күн бұрын

Thank you! You can find out more about ngClass in the docs here: angular.dev/api/common/NgClass, but the explanation for ngStyle may be more helpful: angular.dev/api/common/NgStyle?tab=usage-notes Basically, you can use ngClass to define a set of key and value pairs where the key is the name of the style class and the value is the expression. When the expression is true, the named style class is assigned.

@marshallgraphic 26 күн бұрын

Nice, I didn't know this feature existed

@deborah_kurata 26 күн бұрын

Yeah, it's new in Angular version 18.1, which just came out yesterday. 😊

@marshallgraphic 26 күн бұрын

@@deborah_kurata love it!

@EmilioDegiovanni 26 күн бұрын

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

@deborah_kurata 26 күн бұрын

Thanks! No, destructuring is not possible, at least at this point.

@jeanfrancoisgamache 24 күн бұрын

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

@deborah_kurata 21 күн бұрын

Yes! This is one of those very useful features that could be very misused. I think it can be great for minimizing duplicate expressions, type narrowing, and style attributes. But adding calculations or method calls seems messy.

@mansoorabdullah 16 күн бұрын

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?

@deborah_kurata 14 күн бұрын

For some of the scenarios, yes you could do the same within the component, like the styles and calculations. For other scenarios, no. For example using pipes: @let price = snackItem.price | currency; You can't do this as easily in the component. And type narrowing: @let snack = selectedSnack(); @if (snack) { If you do the type narrowing in the component, the template won't be reactive to the signal. Is that what you were asking?

@mansoorabdullah 14 күн бұрын

@@deborah_kurata great thanks, you always rocks with your clear answers with wonderful examples, many thanks

@such8058 22 күн бұрын

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

@deborah_kurata 21 күн бұрын

Thank you! Did you see the example of calling a method here: kzfaq.info/get/bejne/qq-ZbJZhmdnOdX0.html Or was the question more about whether we should?

@such8058 21 күн бұрын

@@deborah_kurata awesome

@LeungWong 26 күн бұрын

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.

@deborah_kurata 26 күн бұрын

It's about the future. As more and more features of Angular support signals, the current plan is that the let syntax will generate a computed signal in the background. The plan for the 'as' clause doesn't include that. So at some point in the future, signals simplified with the 'as' clause may not re-render when the signal changes. For example, the current plan is that this code: @let snack = selectedSnack(); @if (snack) { {{ snack.numberInStock}} ... } Will always correctly re-render if the selectedSnack() changes. Code like this: @if (selectedSnack(); as snack) { {{ snack.numberInStock}} ... } May not re-render if the selectedSnack() changes. NOTE: The above currently works without issue. But may not once we have signal-based components. ALSO: This is the current *plan* and that plan may change. But this is what the Angular team is currently telling us.

@tiberseptim7183 25 күн бұрын

@@deborah_kurataI don't think that happens, because of breaking backwards compatibility

@deborah_kurata 25 күн бұрын

@@tiberseptim7183I'm sharing what the Angular team is telling the Angular GDEs at this point. Those plans can change, however. Just like how OnPush change detection works differently, it seems that when they do zoneless signal-based components, they don't necessarily have to be backwards compatible with how change detection works now. As long as the "normal" components are backwards compatible.

@Fandikusnadi1979 20 күн бұрын

May I know, for ngx translate is the best?

@deborah_kurata 20 күн бұрын

Are you asking about the ngx-translate i18n internationalization library? I know of it, but haven't used it.

@Edgars82 24 күн бұрын

if optional chaining was required when reading signal selectedSnack() the it is still required after @let declaration. We already was checking if there is selectedSnack() in if but still used optional chaining because i guess some values would not exist - name, price, size. And declaring snack in @let doesn't changes this fact that there any of these values probably doesn't exist. Or optional chaining was not required before declaring snack to @let and so is not required after declaring it to @let if we know that if there is snack then all values will be there.

@such8058 22 күн бұрын

@deborah_kurata 21 күн бұрын

Feel free to try it. The link to the code is in the video details. Also, optional chaining isn't for the values, it's for the object. For example: selectedSnack()?.name Isn't handling whether or not 'name' is null or undefined. It's handling whether the contents of the signal selectedSnack() is null or undefined. Please try it yourself for confirmation that type narrowing does not work when referencing signals (unless you use the @let techniques I demonstrated). There is also an open discussion about signals and nullability on github here: github.com/angular/angular/issues/49161 (NOTE: These discussions occurred BEFORE @let was added.)

@sokka7460 18 күн бұрын

For minute 6.38, Isn't it more appropriate to use computed for this type of expressions? Logic belongs to the typescript file

@deborah_kurata 18 күн бұрын

Of all of the features that the Angular team has provided recently, this one has the biggest possibility of being a "foot gun". It can so easily be used when it shouldn't be. There is a bit of "gray area" when it comes to styling logic. To some teams, "separation of concerns" means that the logic for styling should be in the template, not the component. For others, any logic should be in the component, not the template. What any particular team decides might depend on what they test. If styling is part of testing, it should be in the component. If styles are never tested, then maybe the template is ok. I hope the video demonstrated what can be done with the @let so that you and your team can decide which features, if any, should become part of your standards and which you want to avoid. 😊

@HenrikBgelundLavstsen 26 күн бұрын

I could better see the use of @let on observables you might subscribe to multiple times, then you could just do it once. Though signals can handle a lot of that too.

@deborah_kurata 26 күн бұрын

Yeah, that works great. (I showed an example of that at the end of the video.) I've been moving much of my code to expose state in my services as signals and keep the observables private. So let helps me with the signal type narrowing.

@NoName-1337 25 күн бұрын

why is it better to use @let instead of @if(...; as ...)?

@deborah_kurata 25 күн бұрын

Yeah, I thought about trying to explain why in the video, but it got long so I didn't keep it in. It's about the future. As more and more features of Angular support signals, the current plan is that the let syntax will generate a computed signal in the background. The plan for the 'as' clause doesn't include that. So at some point in the future, signals simplified with the 'as' clause may not re-render when the signal changes. For example, the current plan is that this code: @let snack = selectedSnack(); @if (snack) { {{ snack.numberInStock}} ... } Will always correctly re-render if the selectedSnack() changes. Code like this: @if (selectedSnack(); as snack) { {{ snack.numberInStock}} ... } May not re-render if the selectedSnack() changes. NOTE: The above currently works without issue. But may not in signal-based components. ALSO: This is the current *plan* and that plan may change. But this is what the Angular team is currently telling us.

@NoName-1337 25 күн бұрын

@@deborah_kurata thank you very much for this explanation.