Angular's New @for Block Features

The @for block, part of Angular's new control flow syntax, is great for repeating HTML elements in our templates. And it provides useful features such as an @empty block, odd and even row indication, and easier change tracking.
In this video, we walk through five fun features of the @for block.
Links
Code: stackblitz.com/~/edit/fun-for...
UA-cam video: "Angular's New Template Syntax: Control Flow": • Angular's New Template...
UA-cam video: "Automatically Migrate to Angular's New Control Flow Template Syntax": • Automatically Migrate ...
Content
00:00 @for block
00:46 @empty block
01:25 $index
02:14 $first, $last, $odd, $even
04:03 $count
04:57 track
00:00 Wrap up
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
😊About Me
Hey! I'm Deborah Kurata
I'm a software developer and UA-cam 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 UA-cam 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
#angular17newfeatures
#angular17newfeature
#angular17features
#@for
#@forinangular
#@forinangular17
#angularnewfeatures
#featuresinangular17
#angular@forloop
#angular@for
#angularlatestfeatures
#whatis@forinangular
#angularfeaturesandupdates
#angular17featuresandupdates
#angular@forcontrolflow
#angular@forsyntax
#angular17featureswithexample
#@forinangular17withexample
#angularbestpractices

[@EmilioDegiovanni]

@empty and @for track without declaring a new component method are great features

[@deborah_kurata]

Yep! 😊

[@ali-13392]

Fantastic, thank you so much Deborah!!

[@deborah_kurata]

Thanks! 😊

[@haroldpepete]

great video, i saw your ng-conf video but they have disabled the comment section, so i take this section to greet you and thank you for such an excellent video

[@deborah_kurata]

Thanks! 😊

[@mounirboussetta]

As always, you come up with great stuff from the basics. Thanks.

[@deborah_kurata]

Thank you!

[@ChrisTapay]

Concise and helpful. Thanks Deborah!

[@deborah_kurata]

Glad to hear that. Thank you!

[@richarddefortune1329]

Great as usually

[@deborah_kurata]

Thank you!

[@rolygonz1964]

❤❤❤❤❤❤❤❤ thank you

[@deborah_kurata]

Thanks to you! 😊

[@mohamedbechere4159]

Great content. Many thanks

[@deborah_kurata]

Thank you! 😊

[@IgMa-tc1oj]

Your lessons are excellent as always. Very beautiful hairstyle for the intro, you are a beauty. Thank you for being you, Deborah!

[@deborah_kurata]

Thank you so much! 😊

[@marcosjrs]

thanks!

[@deborah_kurata]

You bet! Thank you!

[@Brendan2Alexander]

nice. wasnt aware of odd, even, count.

[@deborah_kurata]

Glad that it was useful! Thanks!

[@paulodetarsofm]

What if instead of creating the variables inside @for we use the $ variables ($first, $last, etc.) directly in the template? Are there any disadvantages?

[@deborah_kurata]

Yes! The aliasing is optional. I've always done that out of habit, but the let is not required. You can use the variables directly in the template.

[@iuliusciorica282]

❤️

[@deborah_kurata]

😊

[@Edgars82]

if using track function should not we call it with this new @syntax? track trackSnak(snack)?

[@deborah_kurata]

You can just pass the function name. That's easier/shorter.
But if you did want to call it manually, you'd have to pass both arguments: trackSnack($index, snackItem)

[@rishukumar7586]

for some reason your stackblitz url is not working

[@deborah_kurata]

Sorry about that. I just fixed it. Can you try again?

[@rishukumar7586]

@@deborah_kurata thanks for sharing it is working now 👍

[@khyr-hl9yt]

I am curious to know why people don't prefer to keep their business logic inside service file, instead they prefer to use a service as a rest API layer only ?

[@deborah_kurata]

It is recommended that business logic go in a service. This sample application was focused on the @for block, so I didn't take the time to move all of the signals from the component to the service, if that's what you are referring to.
And definitely things like displaying the row number and odd/even highlighting would be UI and not really business logic, right?