Zoneless Angular Applications in V18

[@julienr8114]

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

[@deborah_kurata]

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!

[@LarsRyeJeppesen]

She speaks like an AI generated voice.

[@mikeandtherest]

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.

[@deborah_kurata]

@@mikeandtherest Yes, you are correct. You should still use OnPush for zoneless apps.

[@joanpablojimenez5763]

Thanks Deborah! Your Angular tutorials are fantastic keep up the great work.

[@deborah_kurata]

That is kind of you to say. Thank you! 😊

[@patricsteiner8483]

wow, just randomly found this channel. very clear and brief explanation, no bullshit, thanks :D

[@deborah_kurata]

So great to hear that it's useful. Thank you!

[@fernando_her85]

Amazing video, thank you so much!, you have a really nice and calm voice, love it!

[@deborah_kurata]

Wow, thank you! 😊

[@raihankhan291]

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!

[@deborah_kurata]

Thank you so much! Yes, I'm currently starting to lay out some ideas for a KZbin-based Angular: Getting Started course for v18+. We'll see what happens! 😊

[@albertkao5964]

@@deborah_kurata Great!

[@Brendan2Alexander]

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!

[@deborah_kurata]

Excellent! Congratulations! All the best.

[@sakarsr]

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. 🥰

[@deborah_kurata]

That is so kind of you to say. Thank you very much! All the best. 😊

[@bmiguelmf]

No BS... just an amazingly effective change detection/zone.js explanation

[@deborah_kurata]

Thank you! 😊

[@АндрейМарковский-э5д]

я плохо понимаю английский, но благодаря детальным примерам и хорошей речи я понял этот урок. Качество ваших уроков невероятно высокое, вы потрясающая! Спасибо!

[@deborah_kurata]

Thank you.

[@cristianrodriguez4360]

You are the kind of teacher I would have liked to have had. Thanks!!

[@deborah_kurata]

That is so very kind of you to say. Thank you! 😊

[@miguelmelgar2895]

This is quality video, no single min waste.

[@deborah_kurata]

Thank you! 😊

[@berboko3081]

Thanks you Deborah, loving your work so much !

[@deborah_kurata]

That is kind of you to say. Thank you! 😊

[@brandonelzy4196]

Hi Deborah, I learned so much about Angular from you on Pluralsight. 🙂

[@deborah_kurata]

Excellent! So happy to have helped on your Angular learning journey! 😊

[@vic_shine]

wow, awesome explain ❤ please don't stop making Angular tutorials and similar feature videos for us 😊

[@deborah_kurata]

This type of motivation is valuable! Thanks!

[@taiwokazeem9014]

I've been hearing about zoneless but never knew in detail what it brings to the table until this video

[@deborah_kurata]

So glad to hear that the video was useful!

[@syedmohammadnejat]

Best angular teacher 🤩

[@deborah_kurata]

That is kind of you to say! Thank you! 😊

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 😍

[@deborah_kurata]

Kind of you to say. Thank you! 😊

[@jsuryakt]

Fantastic video explaining zone.js concept and why to go zoneless

[@deborah_kurata]

Thank you! 😊

[@mariyannonchev1355]

Thanks, simple and clear. Looking forward for more Ng vids! :)

[@deborah_kurata]

Thank you!

[@DejanFilipov-gv8qz]

Thank you Angular doctor 💯

[@deborah_kurata]

😊 Thank you!

[@Matrium0]

Hands on + great explanation. Just GREAT content, thank you!

[@deborah_kurata]

So great to hear. Thanks!

[@metric152]

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.

[@deborah_kurata]

Thank you so much! Let me know how it goes getting rid of zones.

[@LucianoGuimarães-s8f]

impeccable work. good job. such a good content to watch :3

[@deborah_kurata]

Thank you so much!

[@sushantkunkekar2155]

Best video ever I watched on zoneless😍

[@deborah_kurata]

Thank you so much! 😊

[@lespacedunmatin]

Very clear ! Thank you.

[@deborah_kurata]

Glad to hear that! Thanks!

[@Nabulio85]

Great Deborah ❤

[@deborah_kurata]

Thank you!

[@МаринаКрупник-г1ю]

Thanks. Very usefull tutorials

[@albertkao5964]

I learned a lot from your KZbin and Pluralsight courses! I am looking forward to your KZbin-based Angular: Getting Started course for v18+. My employer had cut budgets and jobs, so I had lost access to all Pluralsight courses.

[@deborah_kurata]

Thank you! And yes, I'm in the "figuring it out" stage of putting together a KZbin course. 😊

[@nemes1x]

You are the best Deborah!! Thank you!!❤

[@deborah_kurata]

That is kind of you to say. Thank you! 😊

[@clashclan4739]

wow!! simply super and very clearly explained. thank you so much

[@deborah_kurata]

So nice of you to say. Thank you! 😊

[@yassine_klilich]

Thank you so much for this amazing explanation, you are an amazing instructor

[@deborah_kurata]

That is kind of you to say. Thank you! 😊

[@elayamaransekar3790]

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🙏

[@deborah_kurata]

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: kzbin.info/aero/PLErOmyzRKOCrzJ9zUEGgC1zVzVGt3hMmV Here is one for Angular signals: kzbin.info/aero/PLErOmyzRKOCr07Kcnx75Aqh6PWSbIokPB Here is one on Angular Signals + RxJS: kzbin.info/aero/PLErOmyzRKOCrZ7aDGw4WYCtlQUVyKLRyq

[@elayamaransekar3790]

@@deborah_kurata Thank you very much

[@cverde1234]

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😁

[@deborah_kurata]

😆 It's been so long it took me a minute to understand your comment! LOL.

[@prasadmadushan]

Perfect explanation

[@deborah_kurata]

Thanks! 😊

[@richarddefortune1329]

This video title should be "zoneless demystified". Thank you so much. Btw, still planning to record an entire "angular fundamentals" course this summer?

[@deborah_kurata]

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

[@jeromemoulin5241]

So nice !! When you sell a book on Angular !! we need it. ^^

[@deborah_kurata]

Thanks! With how quickly Angular updates, a book is definitely not in my future. 😃 I am considering a KZbin Angular course. Would that be of interest?

[@jeromemoulin5241]

@@deborah_kurata yes of course 🥳

[@DejanFilipov-gv8qz]

Thank you Angular doctor

[@Erril_Ferndal]

sounds great :)

[@deborah_kurata]

Excellent!

[@erichivan5419]

Excelente contenido Débora muchas gracias 👍🏽

[@deborah_kurata]

Thank you for the kind words! 😊 Gracias por tus amables palabras.

[@shazaibrahman6426]

Amazing explaination 👏👏👏

[@deborah_kurata]

Thanks a lot 😊

[@osamaabozahra]

Great video ❤

[@deborah_kurata]

Thank you!!

[@AlexLikeGolf]

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.

[@deborah_kurata]

Thank you so much! 😊 I'll continue to work on more content!

[@toxaq]

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 😎

[@deborah_kurata]

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!

[@toxaq]

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

[@kush.mikashita]

Thanks Deborah!

[@deborah_kurata]

Thank you for watching!

[@alexpanteli3651]

Love your lessons

[@deborah_kurata]

Thank you so very much! 🙏🏼 😊

[@CeezGeez]

last I heard react was generally more performant than angular. I wonder if going zoneless changes that.

[@turboheadcrab666]

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?

Teşekkürler.🙏

[@deborah_kurata]

Thank you so very much! My family is very excited to be heading to Turkiye this fall. Any tips?

[@WebGarmony]

Thank you! I deleted the zone from the current project

[@deborah_kurata]

Great! How's it working out so far? 😊

[@angelocolacicco997]

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?

[@deborah_kurata]

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.)

[@Niachan666]

Great

[@deborah_kurata]

Thanks!

[@haroldpepete]

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?

[@Brendan2Alexander]

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.

[@deborah_kurata]

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.)

[@deborah_kurata]

You aren't the only one on this path. 😆 All the best!

[@ianokay]

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.

[@deborah_kurata]

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)

[@paweld.9542]

With Angular 18 and zoneless environment there is a Material Autocomplete issue - no options are shown :(

[@deborah_kurata]

Could you note this as an issue in GitHub somewhere?

[@paweld.9542]

@@deborah_kurata Yes, I will do it :)

[@rommelalastra5992]

ohh just like reacts hooks

[@deborah_kurata]

I don't know react so I'm not sure of this comparison.

[@_Greenflag_]

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?

[@deborah_kurata]

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

[@_Greenflag_]

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

[@deborah_kurata]

@@_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

[@_Greenflag_]

@@deborah_kurata True that Signals have to be read by calling their getter function. Thank you!

[@LarsRyeJeppesen]

Zoneless rocks, but so many 3rd party libraries require zoneJS to be present: @angular/fire is an example of such a library.

[@deborah_kurata]

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.

[@igorr4682]

soon it will all work like VUE.js lol

[@deborah_kurata]

I don't have much experience with VUE.js. Is this a good thing?😊

[@cooleboy50]

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.

[@deborah_kurata]

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.

[@KaranOdedra]

Just amazing. Thanks a lot :)

[@deborah_kurata]

Great to hear. Thank you!

[@bonnes04]

💯

[@deborah_kurata]

Thanks!

[@HoNow222]

i still have to understand if this is all AI voice, AI picture etc.

[@deborah_kurata]

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: kzbin.info/www/bejne/pnqme5eYeJydZrM Or you can check out any of the videos of me from the live ngConf sessions, such as this one: kzbin.info/www/bejne/jJmsnHeHZrmKopo

[@HoNow222]

​@@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)

[@sumiflow]

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

[@deborah_kurata]

@@sumiflow Thank you. 😊