https://angular.love/the-latest-in-angular-change-detection-zoneless-signals

[giscus[bot]]

https://angular.love/the-latest-in-angular-change-detection-zoneless-signals

Angular.love - a place for all Angular enthusiasts created to inspire and educate.

https://angular.love/the-latest-in-angular-change-detection-zoneless-signals

[fyodorio]

In your opinion, is it safe to go zoneless at this stage (v19) of the Angular roadmap for it? For instance for MVP apps and minor enterprise projects?

[krzysiek-va]

In my opinion, it’s perfectly fine to experiment with zoneless for MVP applications or even smaller enterprise projects, but I’d be cautious when deploying to production. Of course, it also highly depends on your situation, such as whether you’re still relying on third-party dependencies that require zone.js or if you have the resources to adjust the app if needed after some major changes to zoneless (it’s quite unlikely, but still possible since this is experimental at the end).
Anyway, as mentioned in the article, even if you’re not fully zoneless, using OnPush and signals with the hybrid scheduler still brings performance improvements. If you try zoneless in development and switch to hybrid in production, that should work fine too. Once zoneless reaches a more stable stage (like dev-preview or stable), you’ll be ready to go.
In short, I’d give it a try, but be mindful when going to production.

[trminhphu79]

Hey, can you answer me about ZoneLess about "change detection only where it’s necessary and exactly when it’s needed."

This means I only need to use signals in the template, and when the signal changes, does it trigger change detection precisely for that specific component? Or does it still follow the old mechanism where the entire view triggers change detection?
Does this behavior have any impact when I use a click event to change the state of the signal?

Because I use signals with OnPush for all components in application, and when I use setInterval to update the signal value, only the component using the signal triggers change detection.
However, if I click a button within that component to change the signal’s state, all components within the same branch (the hierarchy of this component) will be marked as dirty and re-trigger change detection.

You can check github here: https://github.com/trminhphu79/angular-signal-2
My LinkedIn: https://www.linkedin.com/in/tmp-dev79/

[krzysiek-va]

Hi. In general, the answer to "when the signal changes, does it trigger change detection precisely for that specific component?" is yes, but that's not the full story. The old rules still apply, so if the signal change comes from a template-bound event (like in your case), the event still marks the component and its ancestors as dirty, causing more components to undergo change detection. This specific scenario is described as the first caveat in this section https://angular.love/the-latest-in-angular-change-detection-zoneless-signals#Caveats.

[georgyim]

Could you please explain why in this case (see this diagram https://wp.angular.love/wp-content/uploads/2024/10/one-path.gif) components B and G call ngDoCheck? Why isn't the change detection chain only following the path A ⇒ E ⇒ F?

Additionally, consider the following hierarchy where all components use OnPush:

   A
   │
   B
  / \
 C   D

When a button is clicked in component D, component C also calls ngDoCheck. Why does the change detection not stop at component B (i.e., A ⇒ B ⇒ D) instead?

[georgyim]

ok, i found answer :D

[krzysiek-va]

Sorry, I totally missed your comment. By now, you probably already know that ngDoCheck being called on a component doesn’t mean that the component itself is undergoing a change detection cycle - it means its parent is. When Angular runs change detection on a parent, ngDoCheck is called on its child components, but that doesn’t mean the child’s bindings are being reevaluated. Instead, this hook allows you to run custom logic and, if necessary, let Angular know that the child should be change detected as well.
This article by Max explains exactly this topic: https://angular.love/if-you-think-ngdocheck-means-your-component-is-being-checked-read-this-article