๐ ฐ๏ธ๐ ๐๐ป๐ด๐๐น๐ฎ๐ฟ ๐๐ญ๐ด ๐๐๐ฏ๐ฟ๐ถ๐ฑ ๐๐ต๐ฎ๐ป๐ด๐ฒ ๐๐ฒ๐๐ฒ๐ฐ๐๐ถ๐ผ๐ป ๐ ๐ผ๐ฑ๐ฒ
Khang Tran โก๏ธ
Posted on April 29, 2024
From version 18, Angular will adopt Hybrid change detection scheduling by default, leading to DX improvements.
What is exactly the Hybrid Mode?
โข When Angular receives a clear indication that templates need to be refreshed and change detection should run again, this should not be ignored, ๐ณ๐ฆ๐จ๐ข๐ณ๐ฅ๐ญ๐ฆ๐ด๐ด ๐ฐ๐ง ๐ธ๐ฉ๐ข๐ต ๐ก๐ฐ๐ฏ๐ฆ ๐ช๐ต ๐ฉ๐ข๐ฑ๐ฑ๐ฆ๐ฏ๐ฆ๐ฅ ๐ช๐ฏ.
โข It means now Angular will ensure change detection does run, even when the state update originates ๐ง๐ณ๐ฐ๐ฎ ๐ฐ๐ถ๐ต๐ด๐ช๐ฅ๐ฆ ๐ต๐ฉ๐ฆ ๐ป๐ฐ๐ฏ๐ฆ.
โข It leads to DX improvements since we no longer need to write code that utilizes Angular Zone on-demand, jumping in and out of the Angular Zone using ngZone.runOutSideAngular(() => ...)/ ngZone.run(() => ...)
, respectively.
Angular APIs to schedule change detection
โข calling ChangeDetectorRef.markForCheck
โข calling ComponentRef.setInput
โข updating a signal that is read in a template
โข when bound host or template listeners are triggered
โข attaching a view that is marked dirty
โข removing a view
โข registering a render hook (templates are only refreshed if render hooks do one of the above)
Back to top example
For more information, highly recommend the following article by Matthieu Riegler:
https://riegler.fr/blog/2024-04-17-zoneless-with-zoneless-hybrid
Posted on April 29, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.