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-block-deborahk
KZbin video: "Angular's New Template Syntax: Control Flow": kzbin.info/www/bejne/oGq5hXqIfN54Y9E
KZbin video: "Automatically Migrate to Angular's New Control Flow Template Syntax": kzbin.info/www/bejne/nJykd3uDnc99qbM
*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 KZbin 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 KZbin content: www.youtube.com/@deborah_kurata
Contact me on Twitter: DeborahKurata
Find my Pluralsight courses: www.pluralsight.com/profile/author/deborah-kurata
Access my freeCodeCamp articles: www.freecodecamp.org/news/author/deborah-kurata/
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
#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

[@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! 😊

[@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! 😊

[@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! 😊

[@DejanFilipov-gv8qz]

Teacher 🧡

[@diegoj_c6751]

Awesome! I believe a video about the @let would be nice too

[@deborah_kurata]

Thanks! Yep! I was just waiting to record it until after 18.1 came out this morning. The video should be out tomorrow (Thursday) morning PDT. 😊

[@jesusdelarua5995]

Thank you Deborah!

[@deborah_kurata]

😊

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

[@mohamedbechere4159]

Great content. Many thanks

[@deborah_kurata]

Thank you! 😊

[@rolygonz1964]

❤❤❤❤❤❤❤❤ thank you

[@deborah_kurata]

Thanks to you! 😊

[@Brendan2Alexander]

nice. wasnt aware of odd, even, count.

[@deborah_kurata]

Glad that it was useful! Thanks!

[@marcosjrs]

thanks!

[@deborah_kurata]

You bet! Thank you!

[@iuliusciorica282]

❤️

[@deborah_kurata]

😊

[@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.

[@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)

[@Edgars82]

​@@deborah_kuratacan't pass just function name. It doesn't works with new @syntax. It's even stated in official documentation that have to call track function and pass in arguments.

[@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?