🅰️🚀 𝗔𝗻𝗴𝘂𝗹𝗮𝗿 𝘃𝟭𝟴 𝗛𝘆𝗯𝗿𝗶𝗱 𝗖𝗵𝗮𝗻𝗴𝗲 𝗗𝗲𝘁𝗲𝗰𝘁𝗶𝗼𝗻 𝗠𝗼𝗱𝗲

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