Angular's Change Detection

Подписаться 4,6 тыс.

Просмотров 6 тыс.

50% 1

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

Наука

Опубликовано:

3 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 86

@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 29 дней назад

Thanks a lot!

@ShaggyRobot 3 месяца назад

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

@RainerHahnekamp 3 месяца назад

Wow, great. Thanks for the compliment!

@mohsenarshad1588 8 дней назад

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

@RainerHahnekamp 8 дней назад

Thanks a lot! Happy to hear

@dhavalv 6 месяцев назад

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

@RainerHahnekamp 6 месяцев назад

Thank you Dhaval. Much appreciated!

@kirillruban886 2 месяца назад

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

@RainerHahnekamp 2 месяца назад

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

@Immelstornum 6 месяцев назад

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 6 месяцев назад

Thanks a lot. Glad to hear.

@matteol1356 5 месяцев назад

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

@RainerHahnekamp 5 месяцев назад

Thanks Matteo, much appreciated!

@yaibanoutsukushii 2 месяца назад

great video, thank you!

@RainerHahnekamp 2 месяца назад

Thanks and you are very welcome

@vasilemoraru89 4 месяца назад

very well explained !!!

@RainerHahnekamp 4 месяца назад

Thanks a lot.

@mostafamazhar5675 5 месяцев назад

great explanation, thanks man💙

@RainerHahnekamp 5 месяцев назад

Thanks and you are welcome!

@LarsRyeJeppesen 7 месяцев назад

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

@RainerHahnekamp 7 месяцев назад

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 7 месяцев назад

@@RainerHahnekamp Crossing fingers

@maksadnahibhoolna-wc2ef 6 месяцев назад

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 6 месяцев назад

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 6 месяцев назад

ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-V-D2sk_azcs.html

@jankowalski-mz2cn 2 месяца назад

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

@RainerHahnekamp 2 месяца назад

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?

@Manifibell 4 месяца назад

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 4 месяца назад

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

@Manifibell 4 месяца назад

@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 4 месяца назад

@@Manifibellthat issue rings a bell (quite loud). Please checkout Alex in this video ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-_yMrnSa2cTI.html. It starts at minute 32:30. I think he describes your problem

@Manifibell 4 месяца назад

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

@nandakumarselvaraj7962 3 месяца назад

nice one bro

@RainerHahnekamp 3 месяца назад

Thanks!

@OceanWineRoad6 7 месяцев назад

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 6 месяцев назад

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 6 месяцев назад

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

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

@VinitNeogi 7 месяцев назад

Signals make everything so simpler ❤

@RainerHahnekamp 7 месяцев назад

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?

@aram5642 7 месяцев назад

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 7 месяцев назад

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 7 месяцев назад

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

@RainerHahnekamp 7 месяцев назад

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 4 месяца назад

GOLD

@RainerHahnekamp 4 месяца назад

Thanks👍😀

@mraz-acc 4 месяца назад

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

@RainerHahnekamp 4 месяца назад

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

@why.rofficial1063 7 месяцев назад

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 7 месяцев назад

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 7 месяцев назад

@@RainerHahnekamp thank you!

@BarrettGamingHD 6 месяцев назад

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 6 месяцев назад

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.

@theoverself800 7 месяцев назад

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 7 месяцев назад

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 7 месяцев назад

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 3 месяца назад

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 2 месяца назад

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 2 месяца назад

@@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 2 месяца назад

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

@TroloveCro 7 месяцев назад

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

@RainerHahnekamp 7 месяцев назад

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 7 месяцев назад

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 7 месяцев назад

@@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 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-8jCFt6inhWc.htmlsi=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 7 месяцев назад

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 7 месяцев назад

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

@LarsRyeJeppesen 7 месяцев назад

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 7 месяцев назад

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 7 месяцев назад

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

@JonatanPetersson 7 месяцев назад

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

@RainerHahnekamp 7 месяцев назад

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

@OceanWineRoad6 7 месяцев назад

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

@OceanWineRoad6 7 месяцев назад

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

@RainerHahnekamp 7 месяцев назад

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

@OceanWineRoad6 7 месяцев назад

@@RainerHahnekamp ist vielleicht auch besser so 😂

@leomayer8575 7 месяцев назад

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 7 месяцев назад

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.