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*

*Content*
00:00 Angular new template syntax: control flow
00:32 Sample application in action
01:56 Why the @ symbol for control flow blocks?
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 YouTube 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).

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

[joeyvico]

Best Angular tutor on Youtube. Thanks Deborah

[MattBodman]

Love your videos Deborah. Please keep it up!

[demidovmaxim]

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

[DouglasOGarrido]

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

[DraaElMizan]

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

[baciuciprian]

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.

[getachewmekonnen]

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 .

[jesusdelarua]

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

Thank you.

[jeromemoulin]

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

[PanDaNWS]

You are my favorite teacher about angular ❤❤

[BrendanAlexander]

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

[estuardohernandez]

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

[ali-]

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

[sravant]

Thanks. Looking forward for migration schematic related video

[James-vdxj]

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.

[landonrivers]

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

[richarddefortune]

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.

[paulh]

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

[Saaad]

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

[Tryste]

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