It's almost unbelievable how helpful your tutorials are to me 🏅
@deborah_kurata
Ай бұрын
That's wonderful to hear. Thank you so very much! 😊
@richarddefortune1329
Ай бұрын
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
Ай бұрын
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
Ай бұрын
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
Ай бұрын
Thanks! Yep! I really liked *ngrxLet when using NgRx. I was glad to see this added.
@user-gz9ky5zg7k
Ай бұрын
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
Ай бұрын
Yep! 😊
@josedejesusbarajaschavez1374
Ай бұрын
Interesting, I feel can be very useful but using let carefully. Thanks Deborah.
@deborah_kurata
Ай бұрын
Yes! It seems like something very useful that can easily be misused.
@ErickCcsVzla
Ай бұрын
Excellent. Thank you for the video 😊
@deborah_kurata
Ай бұрын
Great! Thanks!
@deadlyecho
Ай бұрын
Love you Deborah, alawys nice hearing your voice, keep up the good content as always ✨️
@deborah_kurata
Ай бұрын
That is so very kind of you to say. Thank you!
@vic_shine
Ай бұрын
OMG, I love your explanation so much, Deborah ❤ please make more videos about Angular built-in features 😊
@deborah_kurata
Ай бұрын
Thank you so much! If you haven't seen them ... I have a playlist of Angular topics here: kzitem.info/door/PLErOmyzRKOCrzJ9zUEGgC1zVzVGt3hMmV And a playlist of signal features here: kzitem.info/door/PLErOmyzRKOCr07Kcnx75Aqh6PWSbIokPB
@rs4267
Ай бұрын
Thank you for your courses 😊
@deborah_kurata
Ай бұрын
Hope the posts are helpful. Thank you!
@Sandeepkishor123
Ай бұрын
You always come up with great content! Very much informative video!!!
@deborah_kurata
Ай бұрын
Thank you! 😊
@andikusnadi1979
Ай бұрын
The best to learn.
@deborah_kurata
Ай бұрын
Thank you! (Or was this a question?)
@prasoon2510
Ай бұрын
Whenever I see your video, it directly fit inside my mind. Your explanation is awesome.. hats off to you ❤
@deborah_kurata
Ай бұрын
Thank you so much 😀 Great to hear that they are useful!
@prasoon2510
Ай бұрын
@@deborah_kurata can you create a video or playlist for creating a dynamic form with json, and use control value accessor??
@manit77
Ай бұрын
Looking more and more like razor syntax.
@deborah_kurata
Ай бұрын
Yeah, I thought so to. Between that and the TypeScript syntax, Angular seems like the person JavaScript framework for anyone knowledgeable in .NET.
@DejanFilipov-gv8qz
Ай бұрын
Teacher💙
@chellaack1644
Ай бұрын
Awesome Thanks ,creating a obsession for next video!
@deborah_kurata
Ай бұрын
Excellent! Thank you! 😊
@user-wk2ck7xi8p
Ай бұрын
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
Ай бұрын
What I great metaphor! I hadn't thought about that. LOL. Thank you!
@xEnergyGamingHD
Ай бұрын
as always, amazing!
@deborah_kurata
Ай бұрын
Thank you!
@daviduntama
Ай бұрын
Muy interesante, saludos Deborah
@deborah_kurata
Ай бұрын
Gracias! 😊
@iuliusciorica282
Ай бұрын
A big ❤️ thank you!
@deborah_kurata
Ай бұрын
Thank you so much for watching!
@marshallgraphic
Ай бұрын
Nice, I didn't know this feature existed
@deborah_kurata
Ай бұрын
Yeah, it's new in Angular version 18.1, which just came out yesterday. 😊
@marshallgraphic
Ай бұрын
@@deborah_kurata love it!
@sivuyilemagutywa5286
26 күн бұрын
This is good
@deborah_kurata
26 күн бұрын
Thank you!
@KiffinGish
Ай бұрын
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
Ай бұрын
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.
@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.
@deborah_kurata
Ай бұрын
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
Ай бұрын
@@deborah_kurataI don't think that happens, because of breaking backwards compatibility
@deborah_kurata
Ай бұрын
@@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.
@Edgars82
Ай бұрын
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
Ай бұрын
+1
@deborah_kurata
Ай бұрын
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.)
@such8058
Ай бұрын
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
Ай бұрын
Thank you! Did you see the example of calling a method here: kzitem.info/news/bejne/1X-fn2dmbaWbeH4 Or was the question more about whether we should?
@such8058
Ай бұрын
@@deborah_kurata awesome
@sokka7460
Ай бұрын
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
Ай бұрын
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. 😊
@EmilioDegiovanni
Ай бұрын
Great video! is it possible destructuring object/array with @let?
@deborah_kurata
Ай бұрын
Thanks! No, destructuring is not possible, at least at this point.
@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
@deborah_kurata
Ай бұрын
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
Ай бұрын
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
Ай бұрын
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
Ай бұрын
@@deborah_kurata great thanks, you always rocks with your clear answers with wonderful examples, many thanks
@towercontrol4450
Ай бұрын
Thanks!
@deborah_kurata
Ай бұрын
😊
@andikusnadi1979
Ай бұрын
May I know, for ngx translate is the best?
@deborah_kurata
Ай бұрын
Are you asking about the ngx-translate i18n internationalization library? I know of it, but haven't used it.
@NoName-1337
Ай бұрын
why is it better to use @let instead of @if(...; as ...)?
@deborah_kurata
Ай бұрын
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
Ай бұрын
@@deborah_kurata thank you very much for this explanation.
@HenrikBgelundLavstsen
Ай бұрын
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
Ай бұрын
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.
@snajper130
Ай бұрын
Its becoming more and more like React
@sourabhgarg8400
Ай бұрын
Awesome @Deborah...as always...but i have been waiting for function based routing video of yours 🫰🏻, better if user based roles access example used😜
@deborah_kurata
Ай бұрын
Thank you! And thanks for the suggestion. I'll add it to the list!
Пікірлер: 79