Episode 23/44: effect() in developer preview, local change detection with Signals
ng-news
Posted on November 6, 2023
The effect()
function became developer preview again. A "Special Angular Event" is scheduled for 6. November. Angular 17 will support limited local change detection.
Special Event
Next week's episode will likely be about Angular 17. The Angular team announced a live stream for today, 6th November, titled it as "Special Event", and changed its logo on YouTube and X to a question mark.
You definitely want to tune in or watch the recording later.
Developer Preview for effect()
Signals will become stable in 17. Since last week, that statement is not true anymore. The effect() function has been set back to developer preview.
According to the commit message, there have been some issues when we call some functions of the Angular API inside an effect.
Local Change Detection in Angular 17
Signal Components will have fine-grained change detection, meaning that Angular doesn't have to traverse and check through the complete component tree all the time. Unfortunately, it will not be available in 17.
Nevertheless, we will get something which is close to a Signal Component in 17.
If we currently use OnPush, then the component and all its parent components are marked as dirty as well. So the change detection has to check all of them.
In 17, if we use a Signal with OnPush, and that signal changes, then only the component marked as dirty is checked and its parents (if also OnPush) are skipped.
For more information, check out Matthieu Riegler's article and his visual demo, which is based on Daniel Wiehl's former work. Alternatively, you can also read about the commit log at.
perf(core): Update LView consumer to only mark component for check #52302
This commit updates the reactive template and host binding consumers to only mark their declaration components for refresh, but not parents/ancestors.
This also updates the AfterViewChecked
hook to run when a component is refreshed during change detection but its host is not. It is reasonable to expect that the ngAfterViewChecked
lifecycle hook will run when a signal updates and the component is refreshed. The hooks are typically run when the host is refreshed so without this change, the update to not mark ancestors dirty would have caused ngAfterViewChecked
to not run.
resolves #14628 resolves #22646
resolves #34347 - this is not the direct request of the issue but generally forcing change detection to run is necessary only because a value was updated that needs to be synced to the DOM. Values that use signals will mark the component for check automatically so accessing the ChangeDetectorRef
of a child is not necessary. The other part of this request was to avoid the need to "mark all views for checking since it wouldn't affect anything but itself". This is directly addressed by this PR - updating a signal that's read in the child view's template will not cause ancestors/"all views" to be refreshed.
New Releases
We had new minor version releases such as Cypress 13.4 and PrimeNg 17.6.
JHipster, a popular framework/platform, for full-stack development with Spring had with version 8 a new major release.
Posted on November 6, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.