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