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
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.
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!
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?
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.
@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😅
@@Manifibellthat issue rings a bell (quite loud). Please checkout Alex in this video th-cam.com/video/_yMrnSa2cTI/w-d-xo.html. It starts at minute 32:30. I think he describes your problem
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 😌😂
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... 😂
@@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 ;)
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.
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.
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?
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.
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.
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?
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.
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! 😂😂😂
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?
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).
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
@@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 th-cam.com/video/8jCFt6inhWc/w-d-xo.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?
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
@@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
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!
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.
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).
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.
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.
Why onPush is not the default Change detection strategy? I find it weird the way Angular handles re-rendering of the components. React does it more efficiently.
Well, you see how much time I have to spend in order to explain the potential issues with OnPush. With the default mode, it just works. So that's the trade-off. On the one side default is big when it comes to developer experience, on the other side it is slower. In my experience, a lot of Angular applications are already fast enough and it is not necessary to use OnPush. That being said, with zoneless introduced as experimental mode in Angular 18, pure-OnPush applications can now also get rid of zone.js and if we stick to Signals, we end up with the same developer experience with the default change detection. Summary: In 2024, use OnPush.
Best Video for understanding OnPush Strategy so Far :) thank you so much
You are very welcome. With Angular 18 markForCheck will now also trigger the change detection. Maybe I have to release an updated video.
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
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.
th-cam.com/video/V-D2sk_azcs/w-d-xo.html
Best video on Angular's change detection I've seen so far. Thanks a bunch!
Wow, great. Thanks for the compliment!
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!
Thanks a lot. Glad to hear.
Rainer, your videos are always awesome to watch. Thanks a lot for this effort
Thank you Dhaval. Much appreciated!
Hello Rainer, great video as always, your content is really helpful for me!
Thanks Matteo, much appreciated!
wow, thank you! this video is very simple to understand for anyone. I recommend it!
Thanks a lot!
Great video and great channel at all! Especially for mid level angular developers.
Please, continue good work :)
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?
Great video. Subscribed and will check out more of your content. Btw, what IDE are you using, looks refreshing.
Thanks a lot. That's IntelliJ what you see there 👍
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?
YES, I don't have anything to add to your statement. 💯 correct
Very informative, cannot wait for the signal based component inputs to land. Good stuff
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.
@@RainerHahnekamp Crossing fingers
This video is beyond awesome, thanks a lot for giving so many details and clear explanation.
Thanks a lot! Happy to hear
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!
Thanks, nice to hear. I guess you're using OnPush?
@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😅
@@Manifibellthat issue rings a bell (quite loud). Please checkout Alex in this video th-cam.com/video/_yMrnSa2cTI/w-d-xo.html. It starts at minute 32:30. I think he describes your problem
@@RainerHahnekamp Thank you. That is quite relevant indeed.
Great video, keep up the good work. Hello from Russia)
Thanks Kirill, I will and hello from Austria 🇦🇹😀
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 😌😂
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... 😂
@@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 ;)
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.
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.
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?
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.
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.
great explanation, thanks man💙
Thanks and you are welcome!
very well explained !!!
Thanks a lot.
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?
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.
@@RainerHahnekamp In one of the comments you have been suspected of being a bot, turns out it was about me ;)
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! 😂😂😂
Signals make everything so simpler ❤
Yes, although we cannot use simple properties in our components anymore, in terms of rendering performance, reactivity, etc. they are a huge win.
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?
nice one bro
Thanks!
great video, thank you!
Thanks and you are very welcome
Good video good explanation, light theme is the devil lol.
Hey! Thanks, I use dark theme occassionally but always come back to the light mode. Can't help myself 👺
@@RainerHahnekamp Well some day you'll get old too.
@@donwald3436 Well, that's exactyl why I need the light. I don't see so well anymore 😅
German accent gives me 15% boost in learning 😂
Great explanation and example on, let's say complicated topic...
Thank you!
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).
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
@@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 th-cam.com/video/8jCFt6inhWc/w-d-xo.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?
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
@@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
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!
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.
@@RainerHahnekamp thank you!
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
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).
Great, looking forward to it! Thanks!@@RainerHahnekamp
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.
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.
Why onPush is not the default Change detection strategy? I find it weird the way Angular handles re-rendering of the components. React does it more efficiently.
Well, you see how much time I have to spend in order to explain the potential issues with OnPush. With the default mode, it just works. So that's the trade-off. On the one side default is big when it comes to developer experience, on the other side it is slower. In my experience, a lot of Angular applications are already fast enough and it is not necessary to use OnPush.
That being said, with zoneless introduced as experimental mode in Angular 18, pure-OnPush applications can now also get rid of zone.js and if we stick to Signals, we end up with the same developer experience with the default change detection. Summary: In 2024, use OnPush.
GOLD
Thanks👍😀
Literally the thing we discussed in our company today - you a bot or something?!
That's what I call a coincidence :). No bot here, Sir!
Rainer is the one who saves the day - not only in the Angular community :)
@@RainerHahnekampach Servus Herr Magister :) Dein Frankfurter Fanclub ist so stolz auf dich :) Wird Zeit für ng-Japan 🗻⛩️ 😊
@@OceanWineRoad6 Ja hallo, wer bist du denn? Der Nickname sagt mir leider nix 😅
@@RainerHahnekamp ist vielleicht auch besser so 😂