Angular's New Template Syntax: Control Flow

Starting in Angular version 17, we have the option of using new techniques for building our templates. This new block template syntax replaces the NgIf, NgFor, and NgSwitch directives with built-in control flow blocks.
Why do we need a new template syntax? In this video, we first examine the new if and for control flow blocks. Then we outline the benefits and answer the "why?" question.
*Links*
Code: github.com/DeborahK/Angular-Control-Flow
*Content*
00:00 Angular new template syntax: control flow
00:32 Sample application in action
01:00 Conditionals (@if block)
01:56 Why the @ symbol for control flow blocks?
02:18 Conditionals (@else block)
02:48 Conditionals (@else if block)
03:30 Loops (@for block)
04:43 Loops (@empty block)
05:13 Removing the imported directives from the component
06:05 Why do we need a new template syntax?
07:15 Wrap up
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
😊About Me
Hey! I'm Deborah Kurata
I'm a software developer and KZbin content creator. I speak at conferences such as VS Live 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+) over the past 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).
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/
View my KZbin content: www.youtube.com/@deborah_kurata
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
#angular #angularcontrolflow #angular17controlflow #controlflowsyntax #newsyntaxforcontrolflowintemplates #controlflowangular #controlflow #angular17controlflows #howtousenewcontrolflowsinangular17 #angularcontrolflowexplanation #newdeclarativecontrolflowangular #angular 17newcontrolflow #whatisangularcontrolflow #angular@ifcontrolflow #controlflowangularv17 #builtinangularflowtemplate #angular@forcontrolflow

[@joeyvico]

Best Angular tutor on KZbin. Thanks Deborah

[@deborah_kurata]

Wow, thank you! 😊

[@demidovmaxim1008]

Thank you so much for this video. The best channel about Angular!

[@deborah_kurata]

Wow, that is great to hear! Thank you! 😊

[@MattBodman]

Love your videos Deborah. Please keep it up!

[@deborah_kurata]

Thank you so much! 😊

[@DouglasOGarrido]

Thanks Deborah! Always with a good content and simple explanation with good examples! 🎉

[@deborah_kurata]

So great to hear. Thank you!

[@baciuciprian6695]

I like this simple and on point examples. I'm a full stack developer and for someone that hasn't been up to date with angular for 3 years it's very very helpful.

[@deborah_kurata]

So great to hear that it's helpful. Thank you!

[@DraaElMizan]

Nice to have you back Deborah. Will you be updating your Pluralsight courses to Angular 17? Many thanks.

[@deborah_kurata]

Thank you! Yeah, I was in Egypt (as you can tell from the thumbnail LOL) and drove all over France for a few weeks. It was great to take a bit of time off. Very sadly, Pluralsight won't allow me to update my "Angular Getting Started" course. I'm thinking of redoing it on KZbin. For my RxJS course (which is v16), I plan to update for v18 (which is coming out later this spring).

[@DraaElMizan]

@@deborah_kurata Glad you enjoyed your holidays. Your last RXJS course was great. Can't wait to see the updated version. Thank you so much.

[@ali-13392]

Hey Deborah, thanks for yet another awesome video! I thought you were in Egypt from the thumbnail! 😊

[@deborah_kurata]

Thank you! I was in Egypt and it was AMAZING! You'll probably see a bunch more of these thumbnails in the coming weeks because I took hundreds of pictures. 😆

[@getachewmekonnen2508]

Thank you @Deborah ....I watched Angular Component Communication by Deborah Kurata on plural sight in 2018 . since that day , I like your presentation methodology .Even if teaching is two way communication(technically ) but your presentation is like teaching in an interactive class . You answer all the questions that pops up to my mind .

[@deborah_kurata]

Wonderful! Thank you so much! 😊

[@estuardohernandez4230]

As every video you upload, this is exceptional and add so much value to my technical skills. Thank you!

[@deborah_kurata]

Wow, thanks! Great to hear that they have been helpful! 😊

[@jesusdelarua5995]

Hello Deborah! Thank you very much. Great video! I have learned a lot, not just from your KZbin videos, but also from your Pluralsight videos, which I am subscribed because all your videos there are amazing! Great, Great teacher... Thank you.

[@deborah_kurata]

So great to hear that my videos and Pluralsight courses have been helpful. Thank you for the kind words!

[@PanDaNWS]

You are my favorite teacher about angular ❤❤

[@deborah_kurata]

Thank you so much! 😊

[@troynelson6176]

Great info!! Thanks!

[@deborah_kurata]

Glad it was helpful!

[@soromiso]

Thank you, Deborah😊

[@deborah_kurata]

Thank you for watching!

[@moisesgonga1302]

Thanks ☺️ Deborah 🎉

[@deborah_kurata]

Thank you for watching!

[@Brendan2Alexander]

Thanks Deborah very helpful! I started using the new control flow syntax last week. is still a little new, but love it.

[@deborah_kurata]

Glad to hear it was helpful. What is your favorite thing about the new control flow so far?

[@Brendan2Alexander]

@@deborah_kurata it seems more intuitive. Plus when inspecting the html with dev tools u often eliminate need for an extra dev

[@jeromemoulin5241]

Thanks Deborah !! Best Tutor Angular !! Merci beaucoup pour tout ceux que tu fait. ( i know it's french ˆˆ)

[@deborah_kurata]

Wow! Thanks! Le meilleur pour toi. 😊

[@sravant]

Thanks. Looking forward for migration schematic related video

[@deborah_kurata]

Hopefully yet this week!

[@James-vd3xj]

I gotta say, at first I was a bit annoyed by your style of narration (not mean to be offensive). But after watching more and more of your content, I have to say that this is an extremely underrated channel and it has a lot to do with the style of narration you chose on top of the content. Thank you for making these tutorials.

[@deborah_kurata]

Good to hear that the content of the channel is useful. 🙏🏼 Regarding the narration, I just talk ... I didn't realize it was a style. And it certainly isn't something I "chose". 😱 I've been considering using AI instead, but have not found anything yet that sounds great. If you have specific suggestions for how to make the narration better ...

[@James-vd3xj]

@deborah_kurata Hey, I'm really sorry if my comment came off as rude. That wasn't my intention at all. At first, your narration reminded me of the corporate and educational videos that can be a bit dry. But after watching more of your videos, I realized how much I appreciate your style and how it makes the content engaging. I feel ashamed for my initial reaction and for mentioning it the way I did. Seriously, your content is awesome. Please ignore comments like mine and keep doing what you're doing!

[@James-vd3xj]

@@deborah_kurata @deborah_kurata I also wanted to add how grateful I am for your videos. As a hobbyist trying to understand Angular, I've found it to have quite a learning curve. Your tutorials have made it so much easier for me to grasp the concepts. I especially appreciate how your examples include different IDE or text editor environments, which really drive the point of the lessons home. Your examples showing the before and after for new implemented features of Angular are incredibly helpful. With young children and limited time, it can be really challenging to find the resources that fit my schedule and learning style. It often feels like I work on it for a month straight, then have to redirect my focus on life, and when I get back, it feels like I have to start learning a concept all over again. Your content has been a game-changer for me, and I'm sure for many others in similar situations. Thank you for making these complex topics accessible and engaging! Thumbs up and a new subcriber BTW.

[@deborah_kurata]

@@James-vd3xj Thank you! 😊

[@Saaad2]

Queen in the castle, I repeat Angular Queen in the castle!

[@deborah_kurata]

This made me smile! Thank you! 😊

[@Tryste]

The trend is ongoing : Angular fuse with Razor and C# with Typescript :)

[@deborah_kurata]

My thoughts as well. I really like this new @ block syntax for templates.

[@landonrivers]

For @for, aside from the element itself, what else would you put in track?

[@deborah_kurata]

If your code updates the items in the collection/array, you could improve performance by using a unique Id instead of just the item. For example: vehicle.id You could use $index for collections that aren't modified. I've been thinking about doing a separate video that goes into more detail on the @for block, track options, and performance. Do you think that would be useful?

[@albertkao5964]

@@deborah_kurata Yes

[@paulh6933]

the new syntax is great, but i wish it would ident

[@DouglasOGarrido]

VSCode doesn't have by default, but you can use an extension > Prettier. They have implemented the indent for the new Angular Control Flow.

[@paulh6933]

@@DouglasOGarridoi use prettier and have tried a bunch of the solutions. they did not work

[@deborah_kurata]

Check this out: stackoverflow.com/questions/77455062/indentation-with-angular-17-new-control-flow-in-vs-code Maybe something there will help?

[@paulh6933]

@@deborah_kurata @DouglasOGarrido tried the solution above earlier, didn't work. deleted vs code, reinstalled, formatting worked. i saved my settings and have been adding them back slowly., jic a setting was the issue

[@albertkao5964]

@@deborah_kurata Thanks!

[@igorr4682]

Looks like razor template syntax

[@deborah_kurata]

I think that was one of the reasons it seems so intuitive to me. 😄

[@richarddefortune1329]

Hey Deborah, does it make a difference between using the item itself vs using the $index for tracking in the for loop? As usually, the best angular tutor online.

[@deborah_kurata]

Thank you! From the documentation: "For collections that remain static , track $index provides a straightforward tracking mechanism. For dynamic collections experiencing additions, deletions, or reordering, opt for a unique property of each item as the tracking key." I've been considering doing a more "in-depth" post on just the @for with more information on the several "contextual variables" and with an example to demonstrate the performance difference between using "item" and "item.id" on mutable collections. Do you think that would be useful?

[@richarddefortune1329]

For now, I think this explanation is enough since angular is still evolving. I hope just you will record a complete angular course 😇. It looks like Pluralsight has retired almost all your courses.

[@deborah_kurata]

@@richarddefortune1329 Sadly, yes, they did retire most of my courses. I am thinking about doing a complete "Angular: Getting Started" on KZbin ... maybe later this summer after v18 is out?

[@richarddefortune1329]

@@deborah_kurata looking forward to. Thanks in advance.

[@albertkao5964]

@@deborah_kurata I am looking forward to it

[@renrenklein_th]

Love your videos and currently for my job I am starting to implement this new template syntax but I'm running into a timing issue I believe.. @for (record of stageHistoryRecords(); track record) { ... HTML GRID using Ionic ... } @empty { No Data Available. } I'm getting the records from an API Endpoint and I have verified the records are available you can even see the results when inspecting the records of stageHistoryRecords() however it shows No Data Available and even if I remove the @empty directive it stays empty and no displaying the HTML. I know its a long shot but would you have any advice on this matter. Any help is appreciated but also thanks for the videos they are incredible sources of learning.

[@deborah_kurata]

Change detection should refresh the template when the stageHistoryRecords() is populated. So it shouldn't matter that it populates a bit late. What is stageHistoryRecords? A signal? Can you display {{ stageHistoryRecords().length }} or {{ stageHistoryRecords() | json }}? If you use the ngFor directive instead, does it work? Any chance there is an error generated somewhere else? That could prevent change detection from running correctly.

[@renrenklein_th]

​@@deborah_kurataIt's hard to explain but it is an interface model that houses the data of the columns for the grid. That interface is then used for the API.ts where we have all the API endpoint calls and they have their own respective service files the stage-history-records.service.ts file then has a function to fetch the API call and subscribes to the data we then have it become a signal in the service file and we use the computed() to make it a computed Signal the only workaround I've found is adding the hardcoded Data Call here in the constructor of the Service but normally I would go to the app.component.ts file and there I we call the service file via an import and we have an effect(() => { }}) but also a async fetchData function that would subscribe to API call and I would have the Params dynamically passed in once the user clicked the search button by passing the user params in to the Endpoint or for testing purposes I tried to put the call in the NgOnInIt directive Ex) this.fetchData("manualInputParams","...") and this would populate with data however it would not update the HTML instead it would stay @empty unless I put the call within the service itself or in the compute() function but that's not good since it causes an infinite loop. I probably am not explaining it very well I need to just break it apart more just confused since I'm still pretty new to the concepts of some of these being new to signals and this new control flow I do like the direction its all going I just need to become more comfortable with it.

[@renrenklein_th]

@@deborah_kurata Weird I could have sworn I sent a reply to this. Turns out the reason it wasn't working as intended was because there was a computed() and effect() on the signal that I was unaware of and it was changing the code in ways I was not anticipating but I got it resolved. Again thanks for the video definetally love the teaching style. Keep them up ^_^