Angular's Change Detection

แชร์
ฝัง
  • เผยแพร่เมื่อ 27 ธ.ค. 2024

ความคิดเห็น • 86

  • @tejeshwinidugyala9226
    @tejeshwinidugyala9226 7 หลายเดือนก่อน +3

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

    • @RainerHahnekamp
      @RainerHahnekamp  7 หลายเดือนก่อน

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

  • @maksadnahibhoolna-wc2ef
    @maksadnahibhoolna-wc2ef ปีที่แล้ว +1

    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
      @RainerHahnekamp  ปีที่แล้ว +1

      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
      @RainerHahnekamp  ปีที่แล้ว

      th-cam.com/video/V-D2sk_azcs/w-d-xo.html

  • @ShaggyRobot
    @ShaggyRobot 9 หลายเดือนก่อน

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

    • @RainerHahnekamp
      @RainerHahnekamp  9 หลายเดือนก่อน

      Wow, great. Thanks for the compliment!

  • @Immelstornum
    @Immelstornum ปีที่แล้ว +1

    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!

  • @dhavalv
    @dhavalv ปีที่แล้ว +1

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

  • @matteol1356
    @matteol1356 11 หลายเดือนก่อน

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

    • @RainerHahnekamp
      @RainerHahnekamp  11 หลายเดือนก่อน

      Thanks Matteo, much appreciated!

  • @gaborballa9614
    @gaborballa9614 6 หลายเดือนก่อน

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

  • @jankowalski-mz2cn
    @jankowalski-mz2cn 8 หลายเดือนก่อน

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

    • @RainerHahnekamp
      @RainerHahnekamp  8 หลายเดือนก่อน

      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?

  • @mraz-acc
    @mraz-acc 10 หลายเดือนก่อน

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

    • @RainerHahnekamp
      @RainerHahnekamp  10 หลายเดือนก่อน

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

  • @chuopskivlog
    @chuopskivlog 5 หลายเดือนก่อน

    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
      @RainerHahnekamp  5 หลายเดือนก่อน +1

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

  • @LarsRyeJeppesen
    @LarsRyeJeppesen ปีที่แล้ว

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

    • @RainerHahnekamp
      @RainerHahnekamp  ปีที่แล้ว +4

      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
      @LarsRyeJeppesen ปีที่แล้ว +2

      @@RainerHahnekamp Crossing fingers

  • @mohsenarshad1588
    @mohsenarshad1588 6 หลายเดือนก่อน +1

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

    • @RainerHahnekamp
      @RainerHahnekamp  6 หลายเดือนก่อน

      Thanks a lot! Happy to hear

  • @Manifibell
    @Manifibell 10 หลายเดือนก่อน

    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
      @RainerHahnekamp  10 หลายเดือนก่อน

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

    • @Manifibell
      @Manifibell 10 หลายเดือนก่อน

      @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
      @RainerHahnekamp  10 หลายเดือนก่อน +1

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

    • @Manifibell
      @Manifibell 10 หลายเดือนก่อน

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

  • @kirillruban886
    @kirillruban886 8 หลายเดือนก่อน

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

    • @RainerHahnekamp
      @RainerHahnekamp  8 หลายเดือนก่อน

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

  • @OceanWineRoad6
    @OceanWineRoad6 ปีที่แล้ว +2

    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
      @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
      @OceanWineRoad6 ปีที่แล้ว +1

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

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

  • @theoverself800
    @theoverself800 ปีที่แล้ว +2

    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
      @RainerHahnekamp  ปีที่แล้ว +2

      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
      @RainerHahnekamp  ปีที่แล้ว +1

      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.

  • @mostafamazhar5675
    @mostafamazhar5675 11 หลายเดือนก่อน

    great explanation, thanks man💙

    • @RainerHahnekamp
      @RainerHahnekamp  11 หลายเดือนก่อน

      Thanks and you are welcome!

  • @vasilemoraru89
    @vasilemoraru89 9 หลายเดือนก่อน

    very well explained !!!

  • @aram5642
    @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
      @RainerHahnekamp  ปีที่แล้ว +3

      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
      @aram5642 ปีที่แล้ว

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

    • @RainerHahnekamp
      @RainerHahnekamp  ปีที่แล้ว +3

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

  • @VinitNeogi
    @VinitNeogi ปีที่แล้ว +1

    Signals make everything so simpler ❤

    • @RainerHahnekamp
      @RainerHahnekamp  ปีที่แล้ว +1

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

    • @tarquin161234
      @tarquin161234 7 หลายเดือนก่อน

      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?

  • @nandakumarselvaraj7962
    @nandakumarselvaraj7962 9 หลายเดือนก่อน

    nice one bro

  • @AleksandraSetsumei
    @AleksandraSetsumei 8 หลายเดือนก่อน

    great video, thank you!

    • @RainerHahnekamp
      @RainerHahnekamp  8 หลายเดือนก่อน

      Thanks and you are very welcome

  • @donwald3436
    @donwald3436 7 หลายเดือนก่อน

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

    • @RainerHahnekamp
      @RainerHahnekamp  7 หลายเดือนก่อน

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

    • @donwald3436
      @donwald3436 7 หลายเดือนก่อน

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

    • @RainerHahnekamp
      @RainerHahnekamp  7 หลายเดือนก่อน

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

  • @TroloveCro
    @TroloveCro ปีที่แล้ว

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

    • @RainerHahnekamp
      @RainerHahnekamp  ปีที่แล้ว +2

      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
      @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
      @RainerHahnekamp  ปีที่แล้ว +1

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

    • @TroloveCro
      @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
      @RainerHahnekamp  ปีที่แล้ว +1

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

  • @why.rofficial1063
    @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
      @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
      @why.rofficial1063 ปีที่แล้ว

      @@RainerHahnekamp thank you!

  • @LarsRyeJeppesen
    @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
      @RainerHahnekamp  ปีที่แล้ว +2

      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
      @LarsRyeJeppesen ปีที่แล้ว +1

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

  • @leomayer8575
    @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
      @RainerHahnekamp  ปีที่แล้ว +3

      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.

  • @ansumanmishra9608
    @ansumanmishra9608 3 หลายเดือนก่อน

    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.

    • @RainerHahnekamp
      @RainerHahnekamp  3 หลายเดือนก่อน

      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.

  • @maxtuzenko9708
    @maxtuzenko9708 10 หลายเดือนก่อน

    GOLD

  • @JonatanPetersson
    @JonatanPetersson ปีที่แล้ว

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

    • @RainerHahnekamp
      @RainerHahnekamp  ปีที่แล้ว +1

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

    • @OceanWineRoad6
      @OceanWineRoad6 ปีที่แล้ว +3

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

    • @OceanWineRoad6
      @OceanWineRoad6 ปีที่แล้ว +1

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

    • @RainerHahnekamp
      @RainerHahnekamp  ปีที่แล้ว

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

    • @OceanWineRoad6
      @OceanWineRoad6 ปีที่แล้ว

      @@RainerHahnekamp ist vielleicht auch besser so 😂