Angular's Change Detection

In this video, we delve into Angular's rendering behavior in version 17, examining how Angular responds to changes triggered by user interactions or tasks and how it updates the DOM accordingly.
At the heart of this process is Angular's Change Detection mechanism, which operates seamlessly in its default state. However, there are scenarios where fine-tuning is necessary for improved performance, achieved by setting the Change Detection strategy to OnPush. While this can enhance performance, improper usage may result in certain DOM elements not receiving updates.
Throughout the video, we explore these aspects, unraveling the intricacies of Change Detection and introducing "Local Change Detection," a feature introduced in Angular 17.
0:00 Introduction
0:40 Application Walkthrough
2:32 Default Change Detection
4:53 Change Detection Strategy OnPush
9:28 "Dirty Marking" via Property Binding
18:12 "Dirty Marking" via ChangeDetectorRef
21:10 "Dirty Marking" via Handled DOM Event
23:10 "Dirty Marking" via async Pipe
24:24 "Dirty Marking" via a Signal (Local Change Detection)
26:33 Summary & Farewell

[@tejeshwinidugyala9226]

Best Video for understanding OnPush Strategy so Far :) thank you so much

[@RainerHahnekamp]

You are very welcome. With Angular 18 markForCheck will now also trigger the change detection. Maybe I have to release an updated video.

[@gaborballa9614]

wow, thank you! this video is very simple to understand for anyone. I recommend it!

[@RainerHahnekamp]

Thanks a lot!

[@ShaggyRobot]

Best video on Angular's change detection I've seen so far. Thanks a bunch!

[@RainerHahnekamp]

Wow, great. Thanks for the compliment!

[@mohsenarshad1588]

This video is beyond awesome, thanks a lot for giving so many details and clear explanation.

[@RainerHahnekamp]

Thanks a lot! Happy to hear

[@kirillruban886]

Great video, keep up the good work. Hello from Russia)

[@RainerHahnekamp]

Thanks Kirill, I will and hello from Austria 🇦🇹😀

[@Immelstornum]

Thanks for your video, Rainer. It is so important to realize how it works right now to understand why we need new CD mechanisms in the future. Great video!

[@RainerHahnekamp]

Thanks a lot. Glad to hear.

[@yaibanoutsukushii]

great video, thank you!

[@RainerHahnekamp]

Thanks and you are very welcome

[@dhavalv]

Rainer, your videos are always awesome to watch. Thanks a lot for this effort

[@RainerHahnekamp]

Thank you Dhaval. Much appreciated!

[@maksadnahibhoolna-wc2ef]

please please bring up more such in depth videos related to Angular and other tools/frameworks. this is my first video on this channel and I m in love with the depth of info

[@RainerHahnekamp]

Hey, happy you liked it. So the next video will be about the NgRx Signal Store. It will not be an in-depth but will hopefull provide a lot of information. The next real in-depth video will be about Signals. Stay tuned and thanks.

[@RainerHahnekamp]

kzbin.info/www/bejne/jF6nY6ahlMatmdU

[@vasilemoraru89]

very well explained !!!

[@RainerHahnekamp]

Thanks a lot.

[@matteol1356]

Hello Rainer, great video as always, your content is really helpful for me!

[@RainerHahnekamp]

Thanks Matteo, much appreciated!

[@mostafamazhar5675]

great explanation, thanks man💙

[@RainerHahnekamp]

Thanks and you are welcome!

[@Manifibell]

This explained so much, so clearly! Also, I think I might have a new approach to fixing a problem I have been having ! :D thanks!

[@RainerHahnekamp]

Thanks, nice to hear. I guess you're using OnPush?

[@Manifibell]

@Hahnekamp I am going to give it a shot next workday 😊 I am attempting to update a ngModel in onChanges. One input determines the value of another input in the same component. But I keep getting the error that says changes were made after changes has been checked, Having control over change detection was what I was missing! But I didn't know change detection was this controllable. "Wasted" a whole day trying to wait on onChanges😅

[@RainerHahnekamp]

​@@Manifibellthat issue rings a bell (quite loud). Please checkout Alex in this video kzbin.info/www/bejne/laqwo6GJlpeWiqs. It starts at minute 32:30. I think he describes your problem

[@Manifibell]

@@RainerHahnekamp Thank you. That is quite relevant indeed.

[@LarsRyeJeppesen]

Very informative, cannot wait for the signal based component inputs to land. Good stuff

[@RainerHahnekamp]

There is a high chance that they will arrive in 17.2. But that would be only Signal inputs with the normal methods. The "all-in" Signal component hopefully in 2024.

[@LarsRyeJeppesen]

@@RainerHahnekamp Crossing fingers

[@jankowalski-mz2cn]

Great video and great channel at all! Especially for mid level angular developers. Please, continue good work :)

[@RainerHahnekamp]

Thanks a lot Jan. Let's see I want to provide content for high-level angular developers as well, what kind of topics would you expect?

[@OceanWineRoad6]

Servus Rainer, this might be a little off topic below this video, but: The dev life podcast you just shared on X was - from the perspective of an HR manager ;) - very valuable and maybe you should produce such a video for your YT...? Your understanding of teamwork and restraint despite being aware of your own strengths can certainly be very helpful especially for young devs (or other young professionals). Although I'm a fan of the statement "have the courage to be disliked" (referring to experienced workers!) - I think you've given good guidance to young or insecure colleagues with your reflective approach - this is worth sharing with a wider audience. Und ja, ALLE ÖSTERREICHER leben in den Bergen und fahren Ski, so sehen wir Piefkes das tatsächlich 😌😂

[@RainerHahnekamp]

Hello again, thanks, but I'm not sure if it is enough content for a video. Maybe just an article will do it. "courage to be disliked"... I'm not so sure. ...maybe it is better to say "you don't have to please everybody". Dislike might end by having people working against you. And about you, "Piefkes": The third largest immigrants in Vienna are your people. I really hope you don't come because of the mountains. You'll be more than disappointed. The highest point here is around 500m... 😂

[@OceanWineRoad6]

@@RainerHahnekamp hm „working against you“…yeah, good point. And don't worry, I only come to Austria because of the Austrians 😌 So I’ve never been disappointed ;)

[@nandakumarselvaraj7962]

nice one bro

[@RainerHahnekamp]

Thanks!

[@VinitNeogi]

Signals make everything so simpler ❤

[@RainerHahnekamp]

Yes, although we cannot use simple properties in our components anymore, in terms of rendering performance, reactivity, etc. they are a huge win.

[@tarquin161234]

I don't like toSignal though. It's dangerous because you have to have an arbitrary initial value. I have a complex project where these initial values were causing undesired effect calls with initial values before http values came through. I've decided to never use toSignal for this reason, which I think means we may as well just always use rxjs instead of signals. Any thoughts?

[@donwald3436]

Good video good explanation, light theme is the devil lol.

[@RainerHahnekamp]

Hey! Thanks, I use dark theme occassionally but always come back to the light mode. Can't help myself 👺

[@donwald3436]

@@RainerHahnekamp Well some day you'll get old too.

[@RainerHahnekamp]

@@donwald3436 Well, that's exactyl why I need the light. I don't see so well anymore 😅

[@mraz-acc]

Great video. Subscribed and will check out more of your content. Btw, what IDE are you using, looks refreshing.

[@RainerHahnekamp]

Thanks a lot. That's IntelliJ what you see there 👍

[@aram5642]

Another golden nugget from Rainer! Another part of The Missing Angular Manual. One thing started to intrigue me now: whether changeDetection has anything to do with content projection? Should a component that has only inside have cd Default or OnPush or doesn't matter?

[@RainerHahnekamp]

Funny, I'm actually writing on an article with the name "Change Detection: The Missing Manual" ;) That's a good questions of yours. Honestly, I would have to try it out. I don't know but it should be doable with the example of mine.

[@aram5642]

@@RainerHahnekamp In one of the comments you have been suspected of being a bot, turns out it was about me ;)

[@RainerHahnekamp]

Yeah, I typically do a full re-installation of my development machine every year. I think it's about time again to clean things up and get rid of all those bots! 😂😂😂

[@maxtuzenko9708]

GOLD

[@RainerHahnekamp]

Thanks👍😀

[@TroloveCro]

German accent gives me 15% boost in learning 😂 Great explanation and example on, let's say complicated topic... Thank you!

[@RainerHahnekamp]

Thanks a lot. And yes, change detection - especially with OnPush - is one of the hardest topics in Angular. During the recording I confused myself sometimes (that's why you see that the time makes huge jumps).

[@TroloveCro]

Content is great! Keep on making new videos, I would like to see more topics on Angular like this one. Maybe about standalone components (why should I use them and not modules) and maybe SSR topic @@RainerHahnekamp

[@RainerHahnekamp]

​@@TroloveCro Thanks a lot. SSR is a little bit to early in Angular. There has more to come. If you want to see where Angular's heading to, you might want to watch my talk kzbin.info/www/bejne/bpumd6dsntObjcUsi=L2Tqcj392dlMzST_. It is already a little bit old but still valid. About Standalone Components: Where do you see the advantage of staying with NgModules?

[@TroloveCro]

Lazy loading? How can I handle it without modules? I saw your video where you say modules are good for creating libraries, but for everything else standalone component is a winner.@@RainerHahnekamp

[@RainerHahnekamp]

@@TroloveCro Lazy loading also works with routes. So you have a routes configuration which contains components and - if necessary - provides services. The route configuration is now the successor of the module when it comes to lazy loading. You can find an example here: github.com/rainerhahnekamp/eternal/blob/main/src/app/app.routes.ts

[@BarrettGamingHD]

Hi Rainer, thanks for posting, this was really informative! I have just one question: Why does using the async pipe in the child component mark the parent's component as dirty? My understanding was that when using the async pipe in a child component, the parent component won't be marked as dirty when the child component's Observable emits a new value. The change detection in Angular operates within the boundaries of the component where changes occur. When a change is detected in a child component, it triggers change detection for that component and its children, but it doesn't automatically mark the parent component as dirty.

[@RainerHahnekamp]

Hi Barret, thanks, but it is actually the opposite: markForCheck marks the component and its parents as dirty, but not the children. If the children aren't OnPush, then they are automatically checked. But if they are OnPush they wouldn't. You just have to add a button to the ListComponent, which prints something out to the console. If both components are OnPush, you will see that the timer component is not checked. If you have an example for me that shows the opposite, please let me know.

[@why.rofficial1063]

Really nice explanation on the topic! I first wanted to comment on cdr but then I’ve realized that it’s in the video😂 I would like to ask your personal opinion on 2 things: 1) Is triggering the CD manually with the cdr considered ok? 2) If one is sure in the correct functionality of the page with all of the components in it, isn’t it just better to have everything on OnPush? Thank you for your content, keep going!

[@RainerHahnekamp]

Hello, thank you for your positive feedback on my video. Regarding Change Detection Reinforcement (cdr): In a standard application without specific UI requirements, I would not recommend using cdr. Stick to the default change detection (cd) unless you encounter performance issues. Using cdr in such cases can make your code more challenging to understand, potentially leading to bugs without substantial benefits. However, if you're a library author, especially for UI components, the situation changes. In that context, cdr could indeed be one of your best tools. Whether to employ cdr depends on your understanding of CD and whether you're the sole developer in your project or part of a team. If your colleagues don't have the same level of knowledge, using cdr might pose unnecessary challenges for them.

[@why.rofficial1063]

@@RainerHahnekamp thank you!

[@zajunc69]

22:25 - why this child component is not updating itself? It has ChangeDetectionStrategy.Default and setInterval inside of it. My understanding is that it's because setInterval is a global action on Window and ChangeDetectionStrategy.OnPush in ListComponent is blocking tick() to propagate down to TimerComponent, am I right?

[@RainerHahnekamp]

YES, I don't have anything to add to your statement. 💯 correct

[@LarsRyeJeppesen]

Rainer, what are your thoughts on the new NgRx Signal Store? So far I am very impressed by the simplicity of it. Maybe a video about it? cheers

[@RainerHahnekamp]

You've nailed it. I actually recorded the video on Friday already. It will be quite long but hopefully worth to watch it. Postproduction usually takes a little bit longer. So expect the release in the next two weeks (depending on the other things I have to do).

[@LarsRyeJeppesen]

Great, looking forward to it! Thanks!@@RainerHahnekamp

[@theoverself800]

I dont understand why to avoid using onPush frequently. Then you have more control over change detection and as you said it is good for perfomance as well so why to be afraid of using it as default?

[@RainerHahnekamp]

Because it comes with the risk of introducing bugs. As you have seen in the video, a lot of things can go wrong if you don't know about the details of change detection. If you use the default strategy, everything works. You have to weigh out that risk with the performance gains. Also, remember that other people have to work with your code. They also require that deep understanding as you do.

[@RainerHahnekamp]

Just to share some experience. I quite often stumble an application where developers use the changedetectoref. if asked why the use it, they say because CD doesn't run. If I ask them about the performance problem they wanted to fix, they say that there was none and OnPush was just a precaution. That's the problem. Looking forward to hearing your take on it.

[@MartinsProgrammingWorldAndMore]

Hi, but when we apply by default onPush and have only like signals than it is still more beneficial then default change detection no? cause signal change makes component dirty and trigger change detection but with on push we are sure that it is only triggered for our one component and not any parent. What you think?

[@RainerHahnekamp]

In terms of performance OnPush is better, but at the same time you have a higher risk of running into bugs (mutable property binding, asynchronous tasks in OnPush, etc.). That's why I avoided it in the past. Meanwhile it is different story. With Signal Components, we will have the OnPush behavior by default. So I think it might actually make sense to enable OnPush... just to be prepared.

[@MartinsProgrammingWorldAndMore]

@@RainerHahnekamp ohh yes but this is probably still under development cause I did not find it in angular doc so I got it :) thanks.

[@RainerHahnekamp]

@@MartinsProgrammingWorldAndMore you are right. Signal Components is something we might get in 18 or 19.

[@JonatanPetersson]

Literally the thing we discussed in our company today - you a bot or something?!

[@RainerHahnekamp]

That's what I call a coincidence :). No bot here, Sir!

[@OceanWineRoad6]

Rainer is the one who saves the day - not only in the Angular community :)

[@OceanWineRoad6]

@@RainerHahnekampach Servus Herr Magister :) Dein Frankfurter Fanclub ist so stolz auf dich :) Wird Zeit für ng-Japan 🗻⛩️ 😊

[@RainerHahnekamp]

@@OceanWineRoad6 Ja hallo, wer bist du denn? Der Nickname sagt mir leider nix 😅

[@OceanWineRoad6]

@@RainerHahnekamp ist vielleicht auch besser so 😂

[@leomayer8575]

At around 3:50 you mention that using a function in a template is not a good choice. But isn't the "now()" function not pure function - since the input doesn't change - the ChangeDetection won't run? Meaning that if the function would have a different argument the ChangeDetection would run. But than it would be more or less some kind of PropertyBinding - if I'm correct.

[@RainerHahnekamp]

Nono, the argument of a function doesn't really matter for dirty marking or change detection. Again: Change Detection runs on: - Handled DOM Event - Finished Asynchronous Task - (ChangeDetectorRef::detectChanges()) Dirty Marking (only relevant for OnPuhs Components): - Signal Change - Immutable change of an @Input property binding - Handled DOM Event - ChangeDetectorRef::markForCheck (including async pipe) So you see, an argument of a function I call in the template is not a criteria for these two. Maybe I misunderstood your question. If that's the case or if it is still unclear, please let me know.