Zoneless components for Angular 18

[hakimio]

Angular 18 will introduce zoneless signal components and "Angular Material" component library has already done the required migrations to support zoneless. Do you have any plans to support "zoneless Angular"?

Some of the PRs merged to migrate Angular Material:
angular/components#28332
angular/components#28782
angular/components#28783

PS: right now "Taiga UI" doesn't work correctly with the private ɵprovideZonelessChangeDetection() API but that might be quite different from the real zoneless experience which will be delivered in Angular 18.

[waterplea]

Thank you for bringing that up. We will see if we can do the required changes in Angular 16 which will be our base version for Taiga UI 4.0

[hakimio]

zoneless scheduler PRs were just merged for Angular 18:
angular/angular#55102
angular/angular#55252

And released in v18.0.0-next.5:
https://github.com/angular/angular/releases/tag/18.0.0-next.5

[hakimio]

First article about the new provideExperimentalZonelessChangeDetection() provider:
https://justangular.com/blog/a-new-era-for-angular-zoneless-change-detection

Native async/await, when using zoneless CD, is coming too:
angular/angular-cli#27486

Will fix some of the zone.js related promise issues:
angular/angular#47562
angular/angular#51328

[hakimio]

Angular folks have published Requirements for Zoneless compatibility.
Basically do use ChangeDetectionStrategy.OnPush and don't use NgZone.onMicrotaskEmpty, NgZone.onUnstable, NgZone.isStable, or NgZone.onStable.

[hakimio]

Just tested Taiga v3 with Angular 18 provideExperimentalZonelessChangeDetection().
All functionality works as expected but there are a lot of issues with Taiga component styling. For example:

• Taiga Tabs component active tab doesn't have underline
• Taiga button and link with tuiMode="onLight" directive has incorrect style (mode directive removed in v4 in favor of tuiAppearance="icon")
• Accordion collapse animation is broken
• Dialog in mobile mode is not shown in fullscreen

Hopefully Taiga v4 will do better.

[hakimio]

Tested with Taiga 4.6.0 and Angular 18.2.3:

• Tabs active tab underline is fixed now
• tuiMode="onLight" no longer relevant since it was removed. appearance="icon" works fine.
• Accordion collapse animation is still broken (might be related to 🐞 - Accordion component in Firefox closes immediatelly instead of showing animation for collapse #8973)
• Dialog in mobile mode is still not shown in fullscreen