Angular 17 - New Build-In Control Flow Overview 🚀
Vložit
- čas přidán 27. 07. 2024
- Level up your Angular skills with my Advanced Courses 🚀
bit.ly/discounted-course-bundle
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:
github.com/DMezhenskyi/angula...
🕒 Time Codes:
00:00:00 - Intro;
00:00:46 - Demo Project Overview;
00:01:53 - @if block in Action;
00:02:52 - @switch/@case block in Action;
00:07:20 - @for/@empty block in Action;
00:12:55 - Outro;
💡 Short Frontend Snacks (Tips) every week here:
Twitter - / decodedfrontend
Instagram - / decodedfrontend
LinkedIn - / dmezhenskyi
#angular #ng #typescript #webdevelopment - Věda a technologie
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
Good improvement for Angular, i love the new syntax control flow!
Me too! Happy that they have not chosen the Svelte-like syntax :)
@@DecodedFrontend Me too.
@@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.
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 ! 🎊🎊🎊
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!
Absolutely!
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.
Thanks for another useful video, Dmytro) Hope to understand new features better with your help 😉
Hi, where did you buy the new branded Angular T-shirt?
Epic timing on the battery notification at the end 😂.
Tnx for keeping us updated ❤
Great introduction to Angular 17, thanks for that!
Beautiful and neat syntax, make me wanna update to angular 17 right away
Well done! As always
I love this new syntax, this control flow thing is drawing me back to angular!
Great explanation as always! This features are very useful to make codebase more readable and cleaner
I really love the new syntax for the control flow statements, keep up good work and love your video content
Awesome video.
Thank you.
Very well explained !!!
Thank you 👍
your explanation and example case are very very good, Thanks so much for the knowledge👍🏻👍🏻
this is awesome 🔥
Where'd you get the tshirt? 🤔
Need to know too!
Good video with detailed content. Angular becoming awesomerrr...
Thank you for such a detailed video, very usefull
Great job!
thank you
keep it up 👌
This syntax look interesting, seems much more readable, nice video!
Great video, thanks!
Nice presentation. Most important you also provided the source code. Thank you again. Looking forward to a new staff
Gratitude Sirji❤
Nice explanation. Thanks
thank you :)🤩
Дмитре, дякую за гарне і корисне відео! Перша реакція була що тепер в темплейтах буде JS подібний синтаксис, що нагадало якісь старі template engines. Але коли побачив нові "плюшки" - відразу захотілося оновитися до 17 версії і швидше це перевірити!
Welcome back SIR🎉
@defer is mind blowingly cool
Fantastic. Now we're talking
Thank you for video!!
You are welcome 😊
Thanks a lot!
Amazing))
Really like new control flow
very nice by angular, no more repeatitive imports + clean syntax + performance improvements ++, I can't wait for the zoneless updates. Hopefully soon in v18
Absolutely! I also hope that we will see the zone-less Angular in v18 at least in Dev Preview
Nothing can satisfy a programmer in me more than seeing angular moves forward!
I love this
Thanks !!!
I really like it, can't wait it's stable for prod.
Actually, the Control Flow is ready to be used for production. In the “developer preview” mode only the migration schematic.
Дякую за цікаві ангуляр туторіали!
You are welcome, Anton! Thanks for your feedback :)
ty, man!
You're welcome!
Amazing!.. Please create video about the deferrable blocks as well
Definitely! It is in my short list ;)
Yes liked more 🎉🎉🎉🎉
The control flow is awesome.
Thanks for the video, greetings from 🇺🇦
💪🇺🇦
The new control flow syntax is soooo much better
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?
Thanks ;)
Thanks, Dmytro!
Could you explain to us what the Hydration pls? And it'd be great to know about SSR in Angular.
Firstly like, then watch ❤
Love it!! this brand new control flow is awesome. BTW can you pls do a video on `@defer` block.
Of course, it is in my shortlist ;)
Да, классная штука. Очень удобно.
New Angular Is Incredible 🌟🌟 , coming from a React User 🔥 🔥
Thanks. Angular will recover lost market share
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.
Hi Oleksandr. Yep, but this is a big topic that deserves a separate video ;)
@@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 :-)
@@oleksandrvorovchenko8674 Wow, that's great! Unfortunately, I could not attend the NG-POLAND but wanted a lot :(
You should make a course that goes in depth with Angular animations.
This syntax is nice! You can focus more on the template. Those ng-container/ng-template were confusing in my view.
I must agree. I remember how mysterious were for me stuff like ng-template many years ago when I just started with Angular :)
Finally angular do something good!!!
I'm still waiting for a day angular team ships a version that ssr out of the box
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
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.
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!
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 😊
Do you have any benchmarks for the new syntax? How much faster does it render compared to the old approach? Thanks in advance
Thanks for video, as always useful. Love it. 🇺🇦
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?
Is it possible to build something similar to Laravel Nova and Filament PHP using Angular? do you have any idea?
Does this new flow use ng if underneath ? I am asking beacuse of change detection, will it still use the viewContainerRef as ngIF ?
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
Let's hope so! haha
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’
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 ?
Is using switch in template good idea ? How to test it ?
Do you recommend any Angular Course for Beginners? Thanks!
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.
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
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.
Will ng 17 libraries with the new syntax be backwards compatible?
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?
Is learning Angular a good choice for my first tech, or is it still challenging, and should I consider learning React instead?
if i dont need ngif in imports that means also I don't need the commonModule imports ?
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?
The loading stuff is done by @if @else statements, which wrap the @for loop
Why do you put "#" in front of certain variables? Can you explain more about this convention? thanks :)
Where did you get that shirt?!
Next feature please 😅
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
Thanks for your question. Unfortunately, it is not possible to do currently:(
how to use new control flow with async pipe?
does this work in html files too ? so instead of templateRef can i use it in templateUrl
Hi! Yes, sure it works also in files loaded via templateUrl
Could you show @defer and when to use it?
It will be one of the next videos ;)
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.
Hey, whats new course about?
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?
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.
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.
At this point why not just embrace jsx? Genuinely curious
Good overview but it's not point if you make is used the $any to get around types
вэри найс штук
Why you've used hashtags for vars naming?
This # is a native implementation of 'private' access modifier. Basically this `private data = {...}` is similar to `#data = {...}`
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
👆Exactly! Thank you Jakub for the extended explanation. Well done :)
I wonder why the typescript transpiler doesn't convert private declaration to # ?@@jakubdrewniak2668
First
🎉 :)
5 years workng with angular, 3 years with jsx and i cant go back. New Syntax looks bad to me
Это что Blazor? Нет это ангуляр 17
SSR experience is poor
syntax is not intuitive
Tbh I do not like this. 😢😢😢
Really?