As a non native English speaker it's so amazing how it's really easy to understand when you spoke. Thks a lot for this demonstration. This is not far of the "on push" + signal on Angular 17. Signal-based components are coming soon
There is one small distinction that we need to make between OnPush and Zone.js: the OnPush CD strategy states *what* components should refresh, while Zone.js states *when* an Application.tick() should be triggered/scheduled. For which reason, OnPush should still be used with zoneless apps.
This is a priceless explanation in plain English. I don't know how practical or feasible it is to do a series of videos on "Life before and after Angular 18 new features." Your Angular Signal videos were excellent and they showed the contrast.
Thanks Deborah. Already rejiggered my latest angular project to go zoneless. Took a couple of days to finish signalizing all my bindings. But generally wasn't too difficult. Didn't appreciate till now how peculiar the zonejs approach was. The zoneless signals approach seems intuitive and eliminates the voodoo. Goodbye ExpressionChangedAfterItHasBeenCheckedError!
Thanks Deborah, your explanation are just excellent! Please please please get a course on angular 18 from scratch! Will be really helpful for the Angular community!
Thank you so much! Yes, I'm currently starting to lay out some ideas for a UA-cam-based Angular: Getting Started course for v18+. We'll see what happens! 😊
я плохо понимаю английский, но благодаря детальным примерам и хорошей речи я понял этот урок. Качество ваших уроков невероятно высокое, вы потрясающая! Спасибо!
this was a great video. i love the way you demoed each type of update the template handles. i can't wait to start using signals and getting rid of zones.
Even when I make the counter a signal and press the increment button, I thought only the element bound to the signal, which is counter, would get re-rendered, but in this case the Tick value is also being re-rendered. I thought the whole point of signals was that only the elements that actually changed were being re-rendered and Angular wouldn't bother with the things that didn't.
With signals, it isn't "only the elements that actually changed", it's the "view that has changed". How much that "view" entails is currently still being worked on. At this point, that "view" is the component. As I understand it, the hope is to make the "view" a smaller piece (such as just a @for block for example). But there are a lot of unknowns here yet.
This video title should be "zoneless demystified". Thank you so much. Btw, still planning to record an entire "angular fundamentals" course this summer?
😁 Thank you for watching. Regarding a course: I'm currently in the process of trying to figure that out. I'm not sure what it should look like. I could do a large 6+ hour single video. Or I could do a sequence of smaller, 5-10 min videos. The large course means I won't have time to post much else for several months. The smaller videos would allow me to post as I get them done. But they won't be "hooked together" like a course would be. And may not flow quite as seamlessly. Thanks for asking!
Great video, like always! I was under impression that component lifecycle hooks depend on zone.js, and have been writing code without using them since v17. If my components are based on signals, is there any point in the lifecycle hooks? Do they still work in a zoneless change detection?
I learned a lot from your UA-cam and Pluralsight courses! I am looking forward to your UA-cam-based Angular: Getting Started course for v18+. My employer had cut budgets and jobs, so I had lost access to all Pluralsight courses.
Excellent explanation. I'm about to start a new non-critical project in angular. Should start it with v18 ou v19-rc so that I have access to the RxResource API? Thanks for the advice.
Thanks Deborah! Could you please do the full videos of the latest Angular i.e v17 or v18. I learned Angular watching your videos. So keen to learn the latest one from your videos if possible. Many Thanks🙏
That is so kind of you to say. 😊 I had seriously considered doing that, but I would have to drop everything for 3 months to do a full course and I'm not able to do that right now. For now, maybe my playlists would help? Here is one for general/new Angular topics: ua-cam.com/play/PLErOmyzRKOCrzJ9zUEGgC1zVzVGt3hMmV.html Here is one for Angular signals: ua-cam.com/play/PLErOmyzRKOCr07Kcnx75Aqh6PWSbIokPB.html Here is one on Angular Signals + RxJS: ua-cam.com/play/PLErOmyzRKOCrZ7aDGw4WYCtlQUVyKLRyq.html
i think there is no a better way to start a day, thanks, i have a short question, when some feaature is in experimental phase, how long does it take to be ready and it's no longer experimental?
I damned the torpedoes and am going into production without zonejs. Am hoping that the only problem I will have is some minor breaking changes when later versions come out.
Thank you! 😊 The Angular team has often moved from experimental to stable at the next major version (about 6 months). Though some things have been faster (point release) and some much slower (I think effect() is still not marked as stable.)
Congratulations for your way to teach some hard concepts and make them very easy amd straightforward. then.... with zoneleas we won't need anymore of "ChangeDetectionStraategy.oPush" for input property, if we use signal inputs, right? or do we still need of it?
Thank you! The Angular team is still recommending use of ChangeDetectionStrategy.OnPush. From an Angular team member: "Not using OnPush would mean that the component and all its children get refreshed any time its host is refreshed". (At least as of now, even with zoneless.)
I propose injecting $interval and $timeout functions that would trigger change detection. For async we could use a promise library called Q and inject it as $q... My preference for AngularJS is never going away😁
Thanks! With how quickly Angular updates, a book is definitely not in my future. 😃 I am considering a UA-cam Angular course. Would that be of interest?
Is it really a smaller bundle size if you add a signals library? 😋 I'm jk. It makes sense that a system of writing imperative change event emitting everywhere would be more performant than automatic no overhead optimistic change detection triggers. I wonder however if native async provided a hook if we would still be trying to move away so hard.
I know you said you were kidding ... but signals isn't a separate library. It's built into Angular/core. (Not sure how much bigger that got with signals lol)
Thank you for the informative video. But I still have a question left: does it still make sense to use the 'changeDetection.onPush' in a zoneless Angular application?
The current recommendation is to still use OnPush. Not using OnPush still means that the component and all its children get refreshed any time the parent is refreshed
@@deborah_kurata Thanks a lot for your answer. Any advices for the following situation ? I create a signal of a new instance of a class, then create a signal property in this class, then update it later but changes are not reflected in my template. Is this because this is an object, so Angular has trouble updating it? this.test = signal(new Test())() ====== Inside Test class count = signal(0) ... count.update(() => 3) ====== In my template : test.count() but no changes are reflected.
@@_Greenflag_ The template should be test().count() since test and count are both signals. Here's an updated example: stackblitz.com/~/edit/stackblitz-starters-qetzzj
Simply incredible quality on your videos. Thanks very much. Will be a long time before my main project goes zoneless, still part way through ngupgrade from 1.7.8 😎
Thank you for the kind words. Wow, yes there is a big path from 1.7.8 to v18. The good news is that there is a lot from < v16 that you don't need to learn now. (Like ngModules and *ngIf/*ngFor!) All the best!
@@deborah_kurata yes, totally. It was actually the v15 announcement that stopped us doing a vue or svelte migration. StandaloneComponents has us half way to v16 so far!
Why would you say that? These types of comments make me sad. 😞Yes, my midwestern accent/cadence is a bit flat. I continue to work on it. I often wonder if I should just save the time and go with an AI voice instead. And if you are serious, you can watch some *live* video of me at the beginning of my courses. Here is one: ua-cam.com/video/pICJdbC7j0Q/v-deo.html Or you can check out any of the videos of me from the live ngConf sessions, such as this one: ua-cam.com/video/VhIkDQ1TWl8/v-deo.html
@@deborah_kurata Holy quack!! Honeslty the voice for me was too "perfectly standard american" to not be AI, but in a good way. But knowning it is real I think makes it 100% better so please keep up the good work!! Other tutorials on angular makes things look so hard. (Also, in the conference talk you sounded much more natural but maybe it's just me ahah)
@@deborah_kurata You should take it as a complement. I also briefly wondered if it might be an AI voice, but only because you so flawlessly pronounce every word.
Thank you for watching. And yes, there is going to be a delay in third-party libraries updating to zoneless. So it may be a while before apps using these libraries can also go zoneless. But I would assume that for many of these libraries, this work is in progress.
You don't need to go zoneless now. It's still marked as experimental. Consider waiting until everything is signal-based. Then you won't have to manually call change detection.
True. I assume that's part of the reason zoneless is only experimental at this time. Over time, I would expect the libraries to move over to zoneless as well.
As a non native English speaker it's so amazing how it's really easy to understand when you spoke. Thks a lot for this demonstration.
This is not far of the "on push" + signal on Angular 17. Signal-based components are coming soon
So great to hear that the content was clear and useful!
Yep, "on push" + signals gets you quite of the way toward zoneless. All the best!
She speaks like an AI generated voice.
There is one small distinction that we need to make between OnPush and Zone.js: the OnPush CD strategy states *what* components should refresh, while Zone.js states *when* an Application.tick() should be triggered/scheduled. For which reason, OnPush should still be used with zoneless apps.
@@mikeandtherest Yes, you are correct. You should still use OnPush for zoneless apps.
Thanks Deborah! Your Angular tutorials are fantastic keep up the great work.
That is kind of you to say. Thank you! 😊
This is a priceless explanation in plain English. I don't know how practical or feasible it is to do a series of videos on "Life before and after Angular 18 new features." Your Angular Signal videos were excellent and they showed the contrast.
Thank you so much! 😊 I'll continue to work on more content!
Thanks Deborah. Already rejiggered my latest angular project to go zoneless. Took a couple of days to finish signalizing all my bindings. But generally wasn't too difficult. Didn't appreciate till now how peculiar the zonejs approach was. The zoneless signals approach seems intuitive and eliminates the voodoo. Goodbye ExpressionChangedAfterItHasBeenCheckedError!
Excellent! Congratulations!
All the best.
No BS... just an amazingly effective change detection/zone.js explanation
Thank you! 😊
Thanks Deborah, your explanation are just excellent!
Please please please get a course on angular 18 from scratch!
Will be really helpful for the Angular community!
Thank you so much!
Yes, I'm currently starting to lay out some ideas for a UA-cam-based Angular: Getting Started course for v18+. We'll see what happens! 😊
@@deborah_kurata Great!
Amazing video, thank you so much!, you have a really nice and calm voice, love it!
Wow, thank you! 😊
This is quality video, no single min waste.
Thank you! 😊
Oh, what a great teacher you are! Thank you for your time in making this video on Zoneless. Have a good day and Good health. 🥰
That is so kind of you to say. Thank you very much! All the best. 😊
You are the kind of teacher I would have liked to have had. Thanks!!
That is so very kind of you to say. Thank you! 😊
я плохо понимаю английский, но благодаря детальным примерам и хорошей речи я понял этот урок.
Качество ваших уроков невероятно высокое, вы потрясающая! Спасибо!
Thank you.
Best angular teacher 🤩
That is kind of you to say! Thank you! 😊
Thanks you Deborah, loving your work so much !
That is kind of you to say. Thank you! 😊
this was a great video. i love the way you demoed each type of update the template handles. i can't wait to start using signals and getting rid of zones.
Thank you so much!
Let me know how it goes getting rid of zones.
That is great explanation and i think unfortunately most developers need to know these basics to step forward. You are great and thank you again 😍
Kind of you to say. Thank you! 😊
I've been hearing about zoneless but never knew in detail what it brings to the table until this video
So glad to hear that the video was useful!
wow, just randomly found this channel. very clear and brief explanation, no bullshit, thanks :D
So great to hear that it's useful. Thank you!
Fantastic video explaining zone.js concept and why to go zoneless
Thank you! 😊
Even when I make the counter a signal and press the increment button, I thought only the element bound to the signal, which is counter, would get re-rendered, but in this case the Tick value is also being re-rendered. I thought the whole point of signals was that only the elements that actually changed were being re-rendered and Angular wouldn't bother with the things that didn't.
With signals, it isn't "only the elements that actually changed", it's the "view that has changed". How much that "view" entails is currently still being worked on.
At this point, that "view" is the component. As I understand it, the hope is to make the "view" a smaller piece (such as just a @for block for example). But there are a lot of unknowns here yet.
Best video ever I watched on zoneless😍
Thank you so much! 😊
Hi Deborah, I learned so much about Angular from you on Pluralsight. 🙂
Excellent! So happy to have helped on your Angular learning journey! 😊
This video title should be "zoneless demystified". Thank you so much.
Btw, still planning to record an entire "angular fundamentals" course this summer?
😁 Thank you for watching.
Regarding a course: I'm currently in the process of trying to figure that out. I'm not sure what it should look like.
I could do a large 6+ hour single video. Or I could do a sequence of smaller, 5-10 min videos.
The large course means I won't have time to post much else for several months. The smaller videos would allow me to post as I get them done. But they won't be "hooked together" like a course would be. And may not flow quite as seamlessly.
Thanks for asking!
Thanks, simple and clear. Looking forward for more Ng vids! :)
Thank you!
wow, awesome explain ❤ please don't stop making Angular tutorials and similar feature videos for us 😊
This type of motivation is valuable! Thanks!
Hands on + great explanation. Just GREAT content, thank you!
So great to hear. Thanks!
Great video, like always!
I was under impression that component lifecycle hooks depend on zone.js, and have been writing code without using them since v17. If my components are based on signals, is there any point in the lifecycle hooks? Do they still work in a zoneless change detection?
Do lifecycle hooks still make sense for components based on signals? Deborah what do you think? Thanks
@@ai-insightful-podcasts in our refactor we didn't have to use them at all. Everything can be done in the constructor.
I learned a lot from your UA-cam and Pluralsight courses!
I am looking forward to your UA-cam-based Angular: Getting Started course for v18+.
My employer had cut budgets and jobs, so I had lost access to all Pluralsight courses.
Thank you!
And yes, I'm in the "figuring it out" stage of putting together a UA-cam course. 😊
Excellent explanation. I'm about to start a new non-critical project in angular. Should start it with v18 ou v19-rc so that I have access to the RxResource API? Thanks for the advice.
Thanks Deborah! Could you please do the full videos of the latest Angular i.e v17 or v18. I learned Angular watching your videos. So keen to learn the latest one from your videos if possible. Many Thanks🙏
That is so kind of you to say. 😊
I had seriously considered doing that, but I would have to drop everything for 3 months to do a full course and I'm not able to do that right now.
For now, maybe my playlists would help?
Here is one for general/new Angular topics: ua-cam.com/play/PLErOmyzRKOCrzJ9zUEGgC1zVzVGt3hMmV.html
Here is one for Angular signals: ua-cam.com/play/PLErOmyzRKOCr07Kcnx75Aqh6PWSbIokPB.html
Here is one on Angular Signals + RxJS: ua-cam.com/play/PLErOmyzRKOCrZ7aDGw4WYCtlQUVyKLRyq.html
@@deborah_kurata Thank you very much
You are the best Deborah!! Thank you!!❤
That is kind of you to say. Thank you! 😊
wow!! simply super and very clearly explained. thank you so much
So nice of you to say. Thank you! 😊
Thank you so much for this amazing explanation, you are an amazing instructor
That is kind of you to say. Thank you! 😊
impeccable work. good job. such a good content to watch :3
Thank you so much!
Thank you Angular doctor 💯
😊 Thank you!
Excelente contenido Débora muchas gracias 👍🏽
Thank you for the kind words! 😊
Gracias por tus amables palabras.
i think there is no a better way to start a day, thanks, i have a short question, when some feaature is in experimental phase, how long does it take to be ready and it's no longer experimental?
I damned the torpedoes and am going into production without zonejs. Am hoping that the only problem I will have is some minor breaking changes when later versions come out.
Thank you! 😊
The Angular team has often moved from experimental to stable at the next major version (about 6 months). Though some things have been faster (point release) and some much slower (I think effect() is still not marked as stable.)
You aren't the only one on this path. 😆 All the best!
last I heard react was generally more performant than angular. I wonder if going zoneless changes that.
Just amazing. Thanks a lot :)
Great to hear. Thank you!
Very clear ! Thank you.
Glad to hear that! Thanks!
Congratulations for your way to teach some hard concepts and make them very easy amd straightforward.
then.... with zoneleas we won't need anymore of "ChangeDetectionStraategy.oPush" for input property, if we use signal inputs, right?
or do we still need of it?
Thank you!
The Angular team is still recommending use of ChangeDetectionStrategy.OnPush. From an Angular team member: "Not using OnPush would mean that the component and all its children get refreshed any time its host is refreshed". (At least as of now, even with zoneless.)
Great Deborah ❤
Thank you!
Thank you Angular doctor
Perfect explanation
Thanks! 😊
I propose injecting $interval and $timeout functions that would trigger change detection. For async we could use a promise library called Q and inject it as $q... My preference for AngularJS is never going away😁
😆 It's been so long it took me a minute to understand your comment! LOL.
Thanks. Very usefull tutorials
Thank you! 😊
Thanks Deborah!
Thank you for watching!
So nice !! When you sell a book on Angular !! we need it. ^^
Thanks! With how quickly Angular updates, a book is definitely not in my future. 😃 I am considering a UA-cam Angular course. Would that be of interest?
@@deborah_kurata yes of course 🥳
@@deborah_kurata definitely!!
Love your lessons
Thank you so very much! 🙏🏼 😊
Is it really a smaller bundle size if you add a signals library? 😋 I'm jk. It makes sense that a system of writing imperative change event emitting everywhere would be more performant than automatic no overhead optimistic change detection triggers. I wonder however if native async provided a hook if we would still be trying to move away so hard.
I know you said you were kidding ... but signals isn't a separate library. It's built into Angular/core. (Not sure how much bigger that got with signals lol)
Great video ❤
Thank you!!
With Angular 18 and zoneless environment there is a Material Autocomplete issue - no options are shown :(
Could you note this as an issue in GitHub somewhere?
@@deborah_kurata Yes, I will do it :)
Thank you for the informative video. But I still have a question left: does it still make sense to use the 'changeDetection.onPush' in a zoneless Angular application?
The current recommendation is to still use OnPush. Not using OnPush still means that the component and all its children get refreshed any time the parent is refreshed
@@deborah_kurata Thanks a lot for your answer. Any advices for the following situation ? I create a signal of a new instance of a class, then create a signal property in this class, then update it later but changes are not reflected in my template. Is this because this is an object, so Angular has trouble updating it?
this.test = signal(new Test())()
======
Inside Test class
count = signal(0)
...
count.update(() => 3)
======
In my template : test.count()
but no changes are reflected.
@@_Greenflag_ The template should be test().count() since test and count are both signals.
Here's an updated example: stackblitz.com/~/edit/stackblitz-starters-qetzzj
@@deborah_kurata True that Signals have to be read by calling their getter function. Thank you!
sounds great :)
Excellent!
Thank you! I deleted the zone from the current project
Great! How's it working out so far? 😊
Teşekkürler.🙏
Thank you so very much!
My family is very excited to be heading to Turkiye this fall. Any tips?
Simply incredible quality on your videos. Thanks very much. Will be a long time before my main project goes zoneless, still part way through ngupgrade from 1.7.8 😎
Thank you for the kind words.
Wow, yes there is a big path from 1.7.8 to v18. The good news is that there is a lot from < v16 that you don't need to learn now. (Like ngModules and *ngIf/*ngFor!)
All the best!
@@deborah_kurata yes, totally. It was actually the v15 announcement that stopped us doing a vue or svelte migration. StandaloneComponents has us half way to v16 so far!
i still have to understand if this is all AI voice, AI picture etc.
Why would you say that? These types of comments make me sad. 😞Yes, my midwestern accent/cadence is a bit flat. I continue to work on it. I often wonder if I should just save the time and go with an AI voice instead.
And if you are serious, you can watch some *live* video of me at the beginning of my courses. Here is one: ua-cam.com/video/pICJdbC7j0Q/v-deo.html
Or you can check out any of the videos of me from the live ngConf sessions, such as this one: ua-cam.com/video/VhIkDQ1TWl8/v-deo.html
@@deborah_kurata Holy quack!! Honeslty the voice for me was too "perfectly standard american" to not be AI, but in a good way. But knowning it is real I think makes it 100% better so please keep up the good work!!
Other tutorials on angular makes things look so hard.
(Also, in the conference talk you sounded much more natural but maybe it's just me ahah)
@@deborah_kurata You should take it as a complement. I also briefly wondered if it might be an AI voice, but only because you so flawlessly pronounce every word.
@@sumiflow Thank you. 😊
Great
Thanks!
💯
Thanks!
ohh just like reacts hooks
I don't know react so I'm not sure of this comparison.
Thanks, but without zone.js libraries works bad )
Thank you for watching.
And yes, there is going to be a delay in third-party libraries updating to zoneless. So it may be a while before apps using these libraries can also go zoneless. But I would assume that for many of these libraries, this work is in progress.
I don't like this. I need to rework everything. Also I need to call change detection every time. 👎
You don't need to go zoneless now. It's still marked as experimental. Consider waiting until everything is signal-based. Then you won't have to manually call change detection.
Zoneless rocks, but so many 3rd party libraries require zoneJS to be present: @angular/fire is an example of such a library.
True. I assume that's part of the reason zoneless is only experimental at this time. Over time, I would expect the libraries to move over to zoneless as well.
soon it will all work like VUE.js lol
I don't have much experience with VUE.js. Is this a good thing?😊