Angular 17 - New Build-In Control Flow Overview 🚀

Level up your Angular skills with my Advanced Courses 🚀

The latest Angular 17 was released a few hours ago and it is a great time to explore new features it brings. In this video, we will look at the completely brand-new Control Flow that is supposed to replace the old way that relies on structural directives like ngIf, ngSwitch & ngFor. Besides the syntax changes, it also improves performance, making your apps slightly more lightweight and faster.

And this is only one of many other cool features that are coming with #angular17 and in the next videos, I will cover some of the other ones. Stay tuned and don't forget to share the video if you find it useful :)

Source code from the video:

🕒 Time Codes:
00:00:00 - Intro;
00:00:46 - Demo Project Overview;
00:01:53 - @if block in Action;
00:12:55 - Outro;

💡 Short Frontend Snacks (Tips) every week here:

#angular #ng #typescript #webdevelopment

[DecodedFrontend]

Level up your Angular skills with my Advanced Courses 🚀

💡 Short Frontend Snacks (Tips) every week here:

[ihor-pidhornyi]

Hi, where did you buy the new branded Angular T-shirt?

[gund_ua]

Hey Dmytro! I've seen this new syntax and mostly like it but what I do not know if there are any ways to extend it, like with ng* directives it was possible to create custom ones and replace built-in. But I don't think this new syntax exposes any new API to extend it, right? This is the part I do not like but I guess we could still use directives for such use-cases.

[PauloSantos-yutn]

Good improvement for Angular, i love the new syntax control flow!

[dennisist]

Great job Dmytro! I love so much all the new features that the Angular team has released! They've done a really great job with this new release!

[svenson]

10:18 how does that $index work if we have a @for loop inside an @for loop? that would be interesting to know, i would assume $index would be the upper loop index

[serhiikolontaievskyi]

The control flow is awesome.
Thanks for the video, greetings from 🇺🇦

[ВладиславЦерковный]

How can I make the logic in my VSCode, starting with @if and similar constructs, highlight in a different color, rather than being plain white? Please advise.

[drax]

I have a question. Is it possible to create our own control flow? Just like we can create our own custom structural directive, can we create our own control flow and using the new syntax e.g @repeat

[PiotrDeveloper]

This syntax is nice! You can focus more on the template. Those ng-container/ng-template were confusing in my view.

[danielnaydenov]

I love the new control flow syntax, signals and all of the new changes the angular team has been implementing. Also love your videos, keep up the good work ! 🎊🎊🎊

[christopherhelmbold]

does this work in html files too ? so instead of templateRef can i use it in templateUrl

[radvilardian]

very nice by angular, no more repeatitive imports + clean syntax + performance improvements ++, I can't wait for the zoneless updates. Hopefully soon in v18

[vokanred]

Thanks, Dmytro!

Could you explain to us what the Hydration pls? And it'd be great to know about SSR in Angular.

[axeleldrianhadiwibowo]

your explanation and example case are very very good, Thanks so much for the knowledge👍🏻👍🏻

[oleksandrvorovchenko]

There is also a @defer block, which allows to lazy load components (standalone of course). Quite a useful thing to avoid custom wrappers with dymanic component creation.

[whyTh]

Guys, I need help! I am using Angular 8 in my job, but I want to learn Angular 17. It looks like many things have changed since version 8. Should I start over by buying an Angular 17 course (when it's available on Udemy or somewhere else), or should I try to find out what has changed and learn them one by one?

[timsoftsolutions]

I am curious about your opinion of this new control flow syntax considering that, ideally, we want control flow logic inside the the controller, component file, and not in the view, html file. I understand the benefits in performance but I was curious about your opinion on that.

[CodeWithJamil]

Hi Sir Ji,
I have observed that in angular 17 missing environment.ts file environment.prod.ts file. Now how we can set the common url or serverUrl.

[George_]

The new syntax seems easier, the only thing I do not like about angular template, unlike tsx, when they bring something new it’s always pain in the ass to figure out how to write stuff new way correctly. Good example trackBy vs track. They lack of variety of use cases in the documentation.