Angular 17 - New Build-In Control Flow Overview 🚀

[@DecodedFrontend]

Level up your Angular skills with my Advanced Courses 🚀 bit.ly/discounted-course-bundle 💡 Short Frontend Snacks (Tips) every week here: Twitter - twitter.com/DecodedFrontend Instagram - instagram.com/decodedfrontend LinkedIn - www.linkedin.com/in/dmezhenskyi

[@ihor-pidhornyi]

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

[@PauloSantos-yu1tn]

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

[@DecodedFrontend]

Me too! Happy that they have not chosen the Svelte-like syntax :)

[@PauloSantos-yu1tn]

@@DecodedFrontend Me too.

[@1USER1ify]

@@DecodedFrontendyeah, that one would have been even more confusing. I had the impression that I can’t see well where a block of code starts and ends.

[@dennis87ist]

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!

[@DecodedFrontend]

Absolutely!

[@1306dk]

Where'd you get the tshirt? 🤔

[@TheAUa]

Need to know too!

[@psk2166]

Beautiful and neat syntax, make me wanna update to angular 17 right away

[@danielnaydenov9899]

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 ! 🎊🎊🎊

[@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. Also I did not see any mention of the `@defer` block, are you planning on covering this in a separate video?

[@jobokosun-d9t]

Fantastic. Now we're talking

[@LarsRyeJeppesen]

@defer is mind blowingly cool

[@antonkozak2756]

Дякую за цікаві ангуляр туторіали!

[@DecodedFrontend]

You are welcome, Anton! Thanks for your feedback :)

[@svenson95]

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

[@juangoria3517]

Let's hope so! haha

[@DecodedFrontend]

In this case, to avoid the collision, you can rename the context variable from the upper loop likewise it was shown at 09:57. So will have something like ‘let upperIndex = $index’

[@dianlabuschagne2239]

Epic timing on the battery notification at the end 😂. Tnx for keeping us updated ❤

[@oleksandrvorovchenko8674]

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.

[@DecodedFrontend]

Hi Oleksandr. Yep, but this is a big topic that deserves a separate video ;)

[@oleksandrvorovchenko8674]

@@DecodedFrontend , hi Dmytro. Yep, it's a big topic. I was lucky enough to attend NG-POLAND and presentation about @defer block had more than 100 pages :-)

[@DecodedFrontend]

@@oleksandrvorovchenko8674 Wow, that's great! Unfortunately, I could not attend the NG-POLAND but wanted a lot :(

[@sidduhedaginal]

I really love the new syntax for the control flow statements, keep up good work and love your video content

[@sameerdas3672]

Great job Dmytro! Always learning new things from you. It will be awesome if we get a video on signals and their use cases in daily life.

[@serhiikolontaievskyi]

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

[@DecodedFrontend]

💪🇺🇦

[@DeepakKumar-nw6ec]

Really like new control flow

[@axeleldrianhadiwibowo2298]

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

[@kanstantsinmalikau7598]

Nothing can satisfy a programmer in me more than seeing angular moves forward!

[@siliniaTL]

This syntax look interesting, seems much more readable, nice video!

[@mixmax1982]

Дмитре, дякую за гарне і корисне відео! Перша реакція була що тепер в темплейтах буде JS подібний синтаксис, що нагадало якісь старі template engines. Але коли побачив нові "плюшки" - відразу захотілося оновитися до 17 версії і швидше це перевірити!

[@zimcoder]

I love this new syntax, this control flow thing is drawing me back to angular!

[@serhiirudenko5387]

this is awesome 🔥

[@vokanred]

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

[@karthikeyansundaramoorthi247]

Good video with detailed content. Angular becoming awesomerrr...

[@alextiger548]

Nice presentation. Most important you also provided the source code. Thank you again. Looking forward to a new staff

[@CreativeDev-cz7qg]

Very well explained !!! Thank you 👍

[@radvilardian740]

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

[@DecodedFrontend]

Absolutely! I also hope that we will see the zone-less Angular in v18 at least in Dev Preview

[@Srik609]

Love it!! this brand new control flow is awesome. BTW can you pls do a video on `@defer` block.

[@DecodedFrontend]

Of course, it is in my shortlist ;)

[@sebuzz17]

I really like it, can't wait it's stable for prod.

[@DecodedFrontend]

Actually, the Control Flow is ready to be used for production. In the “developer preview” mode only the migration schematic.

[@PiotrDeveloper965]

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

[@DecodedFrontend]

I must agree. I remember how mysterious were for me stuff like ng-template many years ago when I just started with Angular :)

[@nouchance]

Welcome back SIR🎉

[@anastasia3919]

Thank you for video!!

[@DecodedFrontend]

You are welcome 😊

[@thorstenschmidt21]

Do you have any benchmarks for the new syntax? How much faster does it render compared to the old approach? Thanks in advance

[@AmarSingh-uw1db]

Gratitude Sirji❤

[@КонстантинСлавин-т6ъ]

Great explanation as always! This features are very useful to make codebase more readable and cleaner

[@yanaiedri]

Finally angular do something good!!!

[@gagiksimonyan3782]

Thanks for another useful video, Dmytro) Hope to understand new features better with your help 😉

[@monirzaman5366]

Nice explanation. Thanks

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

[@muthu1046]

Amazing!.. Please create video about the deferrable blocks as well

[@DecodedFrontend]

Definitely! It is in my short list ;)

[@svitlana_tanasiichuk]

Thank you for such a detailed video, very usefull

Great introduction to Angular 17, thanks for that!

[@josephsackeykontor4138]

I love this

[@shanilkv]

thank you :)🤩

[@sebawinsten7028]

Yes liked more 🎉🎉🎉🎉

[@rugeneus]

Да, классная штука. Очень удобно.

[@volodymyrleskiv5006]

ty, man!

[@DecodedFrontend]

You're welcome!

[@shneornagar6147]

Great job! thank you keep it up 👌

[@antergonza6476]

Well done! As always

[@JeffreyArt1]

The new control flow syntax is soooo much better

[@ivandynysiuk4341]

Thanks a lot!

[@giacomo.tabarelli]

Could you show @defer and when to use it?

[@DecodedFrontend]

It will be one of the next videos ;)

[@jonatabiondiJsLover]

Thanks. Angular will recover lost market share

[@goombagrenade]

Great video, thanks!

[@siddharthtiwari5314]

I was testing the nested routes and router outlets. To my surprise now we need to import RouterLink on each component we need to use routerLink. I feel like these are the basic things that angular should have made available globally without needing to import in every single component where it is being used. Or even of not global then atleast the parent imports should have been made available to child components. Current approach has increased the no. Of imports and also increased hectic to add one more dependency

[@poh9044]

You should make a course that goes in depth with Angular animations.

[@tornikeen]

Firstly like, then watch ❤

[@baxromxoja16]

Amazing))

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

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.

[@DecodedFrontend]

You have to install the vs code extension called Angular Language Service - marketplace.visualstudio.com/items?itemName=Angular.ng-template And make sure that you install version 17 or above

[@limerickgangster]

Is using switch in template good idea ? How to test it ?

[@rfryanfavour4369]

New Angular Is Incredible 🌟🌟 , coming from a React User 🔥 🔥

[@tarasshevchuk8477]

Thanks !!!

[@drax432]

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

[@DecodedFrontend]

Thanks for your question. Unfortunately, it is not possible to do currently:(

[@ejets26]

Where did you get that shirt?!

[@DevAngular]

Why do you put "#" in front of certain variables? Can you explain more about this convention? thanks :)

[@RahulAzog]

Thanks for the video! If we can create our own control flows like this, could you please make a video about that? It would be awesome!

[@DecodedFrontend]

Currently, you can not create custom blocks but the Angular team does research on this direction. If it becomes possible, I will definitely show how to do it 😊

[@FathiAlamre]

Is it possible to build something similar to Laravel Nova and Filament PHP using Angular? do you have any idea?

[@tntg5]

I'm still waiting for a day angular team ships a version that ssr out of the box

[@caiuscript]

Do you recommend any Angular Course for Beginners? Thanks!

[@George_331]

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.

[@btx47]

Will ng 17 libraries with the new syntax be backwards compatible?

[@farshadbayat64]

Thanks ;)

[@hnazmul]

Hello sir, I see that you are editing template on .ts file. and syntax highlighting is working perfect... But in html why anguler syntax highlighting doesnt work. please any sugestion ?

[@jurybalikov7063]

I work with Angular for about 5 months, company's project is on v15. Can anyone shortly explain to me why people prefer standalone components nowadays and why I see more and more people write html in the component decorator? What about separation of concerns?

[@DecodedFrontend]

Hi! Thanks for your question. Standalone components reduce the unnecessary overhead of NgModules and simplify the mental model of the framework. Standalone components become defacto standard in the framework and I am quite sure that soon become default. Also, some features like host directives can work only if they are standalone. Regarding HTML in the decorator. If the component is small enough, I prefer to have everything in one file because you can immediately understand what the component is doing without jumping between files. This is also good for viewers because they don't need to switch contexts. Regarding the separation of concerns. Different opinions exist. For me, it is more like a separation of technology rather than a separation of concerns. Especially tricky it is with components because usually component model (class) and view (html) are parts of one unit and can’t be separated from each other. For example, a button click event listener (in view) and a corresponding handler in the class are serving the same concern though they belong to different “layers”. So that's why I don't see any controversy in having both in the same file.

[@whyTh0]

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?

[@sebastianyomha7961]

With the @empty how would you differentiate when the api didn’t finish loading from the really empty array? You would have to add a loading variable indicator or there’s another built in block like @loading?

[@oleksandrvorovchenko8674]

The loading stuff is done by @if @else statements, which wrap the @for loop

[@KimberlyWilliamsch]

Is learning Angular a good choice for my first tech, or is it still challenging, and should I consider learning React instead?

[@CodeWithJamil786]

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.

[@genyklemberg]

Is there any issue we can see with approach and if need to chabge out eslint rules for this to work to be changed with prettier write?

[@christopherhelmbold2328]

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

[@DecodedFrontend]

Hi! Yes, sure it works also in files loaded via templateUrl

[@happen_9616]

I'm just giving a shot. I am currently looking for a new Angular project, maybe someone has open positions at your company or knows where they are available, please let me know.

[@deadlyecho]

Does this new flow use ng if underneath ? I am asking beacuse of change detection, will it still use the viewContainerRef as ngIF ?

[@MansurIsakov-u3z]

Hey, whats new course about?

[@hodapro3394]

if i dont need ngif in imports that means also I don't need the commonModule imports ?

[@artem.gaponenko]

Thanks for video, as always useful. Love it. 🇺🇦

[@arturkalbukov6856]

how to use new control flow with async pipe?

[@hamm8934]

At this point why not just embrace jsx? Genuinely curious

[@volodyahuk4286]

Why you've used hashtags for vars naming?

[@DecodedFrontend]

This # is a native implementation of 'private' access modifier. Basically this `private data = {...}` is similar to `#data = {...}`

[@jakubdrewniak2668]

it is true 'private' property in JS. you cannot access this property in runtime and this is the main difference between # prefix and Typescript 'private' - you can access 'private' property in runtime because it's not private anymore after transpilation to JS

[@DecodedFrontend]

👆Exactly! Thank you Jakub for the extended explanation. Well done :)

[@ytamb01]

I wonder why the typescript transpiler doesn't convert private declaration to # ?@@jakubdrewniak2668

[@artempushnev1855]

Next feature please 😅

[@reginaldbellas703]

Good overview but it's not point if you make is used the $any to get around types

[@ghostinplainsight4803]

The control flow was the worst part of Angular bloating the html to the point it was unreadable, this is an amazing update! Now I can use RXJS with nicer, slimmer and clearer templating.

[@jjmato]

5 years workng with angular, 3 years with jsx and i cant go back. New Syntax looks bad to me

[@viktorm2937]

вэри найс штук

[@syimykamatov8955]

First

[@DecodedFrontend]

🎉 :)

[@alexeykazakevich338]

Это что Blazor? Нет это ангуляр 17

[@amitkumdixit]

SSR experience is poor

[@tolgask2812]

syntax is not intuitive

[@TungPham-hn1lr]

Tbh I do not like this. 😢😢😢

[@rockenOne]

Really?