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
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 ! 🎊🎊🎊
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 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 :-)
very nice by angular, no more repeatitive imports + clean syntax + performance improvements ++, I can't wait for the zoneless updates. Hopefully soon in v18
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?
Дмитре, дякую за гарне і корисне відео! Перша реакція була що тепер в темплейтах буде JS подібний синтаксис, що нагадало якісь старі template engines. Але коли побачив нові "плюшки" - відразу захотілося оновитися до 17 версії і швидше це перевірити!
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
10 месяцев назад
Great introduction to Angular 17, thanks for that!
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
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’
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.
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.
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 😊
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
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
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.
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?
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.
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 ?
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.
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?
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
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.
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!
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 ! 🎊🎊🎊
Hi, where did you buy the new branded Angular T-shirt?
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 :(
Beautiful and neat syntax, make me wanna update to angular 17 right away
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
Where'd you get the tshirt? 🤔
Need to know too!
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.
Epic timing on the battery notification at the end 😂.
Tnx for keeping us updated ❤
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 :)
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?
your explanation and example case are very very good, Thanks so much for the knowledge👍🏻👍🏻
The control flow is awesome.
Thanks for the video, greetings from 🇺🇦
💪🇺🇦
I love this new syntax, this control flow thing is drawing me back to angular!
I really love the new syntax for the control flow statements, keep up good work and love your video content
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.
Fantastic. Now we're talking
@defer is mind blowingly cool
Thanks, Dmytro!
Could you explain to us what the Hydration pls? And it'd be great to know about SSR in Angular.
Дмитре, дякую за гарне і корисне відео! Перша реакція була що тепер в темплейтах буде JS подібний синтаксис, що нагадало якісь старі template engines. Але коли побачив нові "плюшки" - відразу захотілося оновитися до 17 версії і швидше це перевірити!
This syntax look interesting, seems much more readable, nice video!
Nothing can satisfy a programmer in me more than seeing angular moves forward!
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 ;)
Really like new control flow
Thanks for another useful video, Dmytro) Hope to understand new features better with your help 😉
Дякую за цікаві ангуляр туторіали!
You are welcome, Anton! Thanks for your feedback :)
Nice presentation. Most important you also provided the source code. Thank you again. Looking forward to a new staff
Amazing!.. Please create video about the deferrable blocks as well
Definitely! It is in my short list ;)
You should make a course that goes in depth with Angular animations.
Great explanation as always! This features are very useful to make codebase more readable and cleaner
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
Great introduction to Angular 17, thanks for that!
The new control flow syntax is soooo much better
Good video with detailed content. Angular becoming awesomerrr...
Awesome video.
Thank you.
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’
Very well explained !!!
Thank you 👍
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.
I'm still waiting for a day angular team ships a version that ssr out of the box
Thank you for such a detailed video, very usefull
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.
Thank you for video!!
You are welcome 😊
this is awesome 🔥
Finally angular do something good!!!
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 😊
Nice explanation. Thanks
I love this
thank you :)🤩
Great job!
thank you
keep it up 👌
New Angular Is Incredible 🌟🌟 , coming from a React User 🔥 🔥
Well done! As always
Yes liked more 🎉🎉🎉🎉
Gratitude Sirji❤
Welcome back SIR🎉
Thanks. Angular will recover lost market share
Do you have any benchmarks for the new syntax? How much faster does it render compared to the old approach? Thanks in advance
ty, man!
You're welcome!
Thanks a lot!
Да, классная штука. Очень удобно.
Amazing))
Could you show @defer and when to use it?
It will be one of the next videos ;)
Thanks !!!
Why do you put "#" in front of certain variables? Can you explain more about this convention? 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
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:(
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.
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?
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.
Is using switch in template good idea ? How to test it ?
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 it possible to build something similar to Laravel Nova and Filament PHP using Angular? do you have any idea?
Thanks ;)
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.
Do you recommend any Angular Course for Beginners? Thanks!
Where did you get that shirt?!
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.
Next feature please 😅
At this point why not just embrace jsx? Genuinely curious
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
Firstly like, then watch ❤
Will ng 17 libraries with the new syntax be backwards compatible?
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
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?
if i dont need ngif in imports that means also I don't need the commonModule imports ?
Hey, whats new course about?
Does this new flow use ng if underneath ? I am asking beacuse of change detection, will it still use the viewContainerRef as ngIF ?
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
how to use new control flow with async pipe?
Thanks for video, as always useful. Love it. 🇺🇦
5 years workng with angular, 3 years with jsx and i cant go back. New Syntax looks bad to me
вэри найс штук
First
🎉 :)
Это что Blazor? Нет это ангуляр 17
SSR experience is poor
Tbh I do not like this. 😢😢😢
Really?
syntax is not intuitive