diff --git a/apps/demos/Demos/Accordion/Overview/Angular/app/app.component.ts b/apps/demos/Demos/Accordion/Overview/Angular/app/app.component.ts
index 1e541349c358..8955a9121ef4 100644
--- a/apps/demos/Demos/Accordion/Overview/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Accordion/Overview/Angular/app/app.component.ts
@@ -2,7 +2,6 @@ import {
   ChangeDetectorRef,
   Component,
   enableProdMode,
-  provideZoneChangeDetection,
 } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import {
@@ -50,8 +49,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Accordion/Overview/Angular/index.html b/apps/demos/Demos/Accordion/Overview/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Accordion/Overview/Angular/index.html
+++ b/apps/demos/Demos/Accordion/Overview/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Box/Overview/Angular/app/app.component.ts b/apps/demos/Demos/Box/Overview/Angular/app/app.component.ts
index 7e7ee923cdad..58491df9d809 100644
--- a/apps/demos/Demos/Box/Overview/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Box/Overview/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxBoxModule } from 'devextreme-angular';
 
 if (!/localhost/.test(document.location.host)) {
@@ -17,8 +17,4 @@ if (!/localhost/.test(document.location.host)) {
 export class AppComponent {
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Box/Overview/Angular/index.html b/apps/demos/Demos/Box/Overview/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Box/Overview/Angular/index.html
+++ b/apps/demos/Demos/Box/Overview/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/ContextMenu/Basics/Angular/app/app.component.ts b/apps/demos/Demos/ContextMenu/Basics/Angular/app/app.component.ts
index 39bc597b9e8e..03d944325d4b 100644
--- a/apps/demos/Demos/ContextMenu/Basics/Angular/app/app.component.ts
+++ b/apps/demos/Demos/ContextMenu/Basics/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import notify from 'devextreme/ui/notify';
 import { DxContextMenuModule, type DxContextMenuTypes } from 'devextreme-angular/ui/context-menu';
 
@@ -44,8 +44,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/ContextMenu/Basics/Angular/index.html b/apps/demos/Demos/ContextMenu/Basics/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/ContextMenu/Basics/Angular/index.html
+++ b/apps/demos/Demos/ContextMenu/Basics/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/ContextMenu/Scrolling/Angular/app/app.component.ts b/apps/demos/Demos/ContextMenu/Scrolling/Angular/app/app.component.ts
index 0c132ca3195c..60a5f808c0f7 100644
--- a/apps/demos/Demos/ContextMenu/Scrolling/Angular/app/app.component.ts
+++ b/apps/demos/Demos/ContextMenu/Scrolling/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import notify from 'devextreme/ui/notify'; // Import notify correctly
 import { DxContextMenuModule, type DxContextMenuTypes } from 'devextreme-angular/ui/context-menu';
 
@@ -32,8 +32,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/ContextMenu/Scrolling/Angular/index.html b/apps/demos/Demos/ContextMenu/Scrolling/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/ContextMenu/Scrolling/Angular/index.html
+++ b/apps/demos/Demos/ContextMenu/Scrolling/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/ContextMenu/Templates/Angular/app/app.component.ts b/apps/demos/Demos/ContextMenu/Templates/Angular/app/app.component.ts
index 876ec22805d2..876a66beb4aa 100644
--- a/apps/demos/Demos/ContextMenu/Templates/Angular/app/app.component.ts
+++ b/apps/demos/Demos/ContextMenu/Templates/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import notify from 'devextreme/ui/notify';
 import { DxContextMenuModule, type DxContextMenuTypes } from 'devextreme-angular/ui/context-menu';
 
@@ -43,8 +43,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/ContextMenu/Templates/Angular/index.html b/apps/demos/Demos/ContextMenu/Templates/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/ContextMenu/Templates/Angular/index.html
+++ b/apps/demos/Demos/ContextMenu/Templates/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Drawer/LeftOrRightPosition/Angular/app/app.component.ts b/apps/demos/Demos/Drawer/LeftOrRightPosition/Angular/app/app.component.ts
index cb2c48f93ee1..9a23f197efb6 100644
--- a/apps/demos/Demos/Drawer/LeftOrRightPosition/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Drawer/LeftOrRightPosition/Angular/app/app.component.ts
@@ -1,6 +1,6 @@
 import { bootstrapApplication } from '@angular/platform-browser';
 import {
-  ChangeDetectorRef, Component, ViewChild, enableProdMode, provideZoneChangeDetection,
+  ChangeDetectorRef, Component, ViewChild, enableProdMode,
 } from '@angular/core';
 import { DxListModule, DxRadioGroupModule, DxToolbarModule } from 'devextreme-angular';
 import { DxDrawerModule, DxDrawerComponent } from 'devextreme-angular/ui/drawer';
@@ -64,8 +64,4 @@ export class AppComponent {
   }];
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Drawer/LeftOrRightPosition/Angular/index.html b/apps/demos/Demos/Drawer/LeftOrRightPosition/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Drawer/LeftOrRightPosition/Angular/index.html
+++ b/apps/demos/Demos/Drawer/LeftOrRightPosition/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Drawer/TopOrBottomPosition/Angular/app/app.component.ts b/apps/demos/Demos/Drawer/TopOrBottomPosition/Angular/app/app.component.ts
index df1985f87e59..fecdcd19fed4 100644
--- a/apps/demos/Demos/Drawer/TopOrBottomPosition/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Drawer/TopOrBottomPosition/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, ViewChild, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, ViewChild, enableProdMode } from '@angular/core';
 import { DxListModule, DxRadioGroupModule, DxToolbarModule } from 'devextreme-angular';
 import { DxDrawerComponent, DxDrawerModule } from 'devextreme-angular/ui/drawer';
 import type { DxDrawerTypes } from 'devextreme-angular/ui/drawer';
@@ -58,8 +58,4 @@ export class AppComponent {
   }];
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Drawer/TopOrBottomPosition/Angular/index.html b/apps/demos/Demos/Drawer/TopOrBottomPosition/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Drawer/TopOrBottomPosition/Angular/index.html
+++ b/apps/demos/Demos/Drawer/TopOrBottomPosition/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/FieldSet/Overview/Angular/app/app.component.ts b/apps/demos/Demos/FieldSet/Overview/Angular/app/app.component.ts
index abbf3118cbf6..98938071c90b 100644
--- a/apps/demos/Demos/FieldSet/Overview/Angular/app/app.component.ts
+++ b/apps/demos/Demos/FieldSet/Overview/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxTextBoxModule, DxTextAreaModule } from 'devextreme-angular';
 
 if (!/localhost/.test(document.location.host)) {
@@ -20,8 +20,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/FieldSet/Overview/Angular/index.html b/apps/demos/Demos/FieldSet/Overview/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/FieldSet/Overview/Angular/index.html
+++ b/apps/demos/Demos/FieldSet/Overview/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Gallery/ItemTemplate/Angular/app/app.component.ts b/apps/demos/Demos/Gallery/ItemTemplate/Angular/app/app.component.ts
index 8d2c3b80be50..e5b11b9f5ae3 100644
--- a/apps/demos/Demos/Gallery/ItemTemplate/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Gallery/ItemTemplate/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { CurrencyPipe } from '@angular/common';
 import { DxGalleryModule } from 'devextreme-angular';
 import { Service, House } from './app.service';
@@ -26,8 +26,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Gallery/ItemTemplate/Angular/index.html b/apps/demos/Demos/Gallery/ItemTemplate/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Gallery/ItemTemplate/Angular/index.html
+++ b/apps/demos/Demos/Gallery/ItemTemplate/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Gallery/Overview/Angular/app/app.component.ts b/apps/demos/Demos/Gallery/Overview/Angular/app/app.component.ts
index 41de6b488023..4141e0c40c63 100644
--- a/apps/demos/Demos/Gallery/Overview/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Gallery/Overview/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxGalleryModule } from 'devextreme-angular';
 import { DxCheckBoxModule, DxCheckBoxTypes } from 'devextreme-angular/ui/check-box';
 import { Service, Image } from './app.service';
@@ -32,8 +32,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Gallery/Overview/Angular/index.html b/apps/demos/Demos/Gallery/Overview/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Gallery/Overview/Angular/index.html
+++ b/apps/demos/Demos/Gallery/Overview/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/List/DragAndDrop/Angular/app/app.component.ts b/apps/demos/Demos/List/DragAndDrop/Angular/app/app.component.ts
index 37611b5e7d0d..8fec1b1acdc5 100644
--- a/apps/demos/Demos/List/DragAndDrop/Angular/app/app.component.ts
+++ b/apps/demos/Demos/List/DragAndDrop/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import {
-  ChangeDetectorRef, Component, enableProdMode, provideZoneChangeDetection,
+  ChangeDetectorRef, Component, enableProdMode,
 } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { DxListModule } from 'devextreme-angular';
@@ -50,8 +50,4 @@ export class AppComponent {
   };
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/List/DragAndDrop/Angular/index.html b/apps/demos/Demos/List/DragAndDrop/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/List/DragAndDrop/Angular/index.html
+++ b/apps/demos/Demos/List/DragAndDrop/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/List/Grouping/Angular/app/app.component.ts b/apps/demos/Demos/List/Grouping/Angular/app/app.component.ts
index 48ab8db5dc97..dd28a0a2e1a3 100644
--- a/apps/demos/Demos/List/Grouping/Angular/app/app.component.ts
+++ b/apps/demos/Demos/List/Grouping/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxListModule } from 'devextreme-angular';
 
 import { Employee, Service } from './app.service';
@@ -25,8 +25,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/List/Grouping/Angular/index.html b/apps/demos/Demos/List/Grouping/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/List/Grouping/Angular/index.html
+++ b/apps/demos/Demos/List/Grouping/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/List/ItemDeletion/Angular/app/app.component.ts b/apps/demos/Demos/List/ItemDeletion/Angular/app/app.component.ts
index f888d9bd3477..e2e9a21e0d4b 100644
--- a/apps/demos/Demos/List/ItemDeletion/Angular/app/app.component.ts
+++ b/apps/demos/Demos/List/ItemDeletion/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxSelectBoxModule, DxCheckBoxModule } from 'devextreme-angular';
 import { DxListModule } from 'devextreme-angular/ui/list';
 import type { DxListTypes } from 'devextreme-angular/ui/list';
@@ -33,8 +33,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/List/ItemDeletion/Angular/index.html b/apps/demos/Demos/List/ItemDeletion/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/List/ItemDeletion/Angular/index.html
+++ b/apps/demos/Demos/List/ItemDeletion/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/List/ItemTemplate/Angular/app/app.component.ts b/apps/demos/Demos/List/ItemTemplate/Angular/app/app.component.ts
index 47a22f662b95..374dfca59f59 100644
--- a/apps/demos/Demos/List/ItemTemplate/Angular/app/app.component.ts
+++ b/apps/demos/Demos/List/ItemTemplate/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { CurrencyPipe } from '@angular/common';
 import { DxListModule } from 'devextreme-angular';
 
@@ -27,8 +27,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/List/ItemTemplate/Angular/index.html b/apps/demos/Demos/List/ItemTemplate/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/List/ItemTemplate/Angular/index.html
+++ b/apps/demos/Demos/List/ItemTemplate/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/List/Search/Angular/app/app.component.ts b/apps/demos/Demos/List/Search/Angular/app/app.component.ts
index 2a1e2eeeed90..3dc4c9143242 100644
--- a/apps/demos/Demos/List/Search/Angular/app/app.component.ts
+++ b/apps/demos/Demos/List/Search/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxSelectBoxModule, DxListModule } from 'devextreme-angular';
 
 import { Product, Service } from './app.service';
@@ -27,8 +27,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/List/Search/Angular/index.html b/apps/demos/Demos/List/Search/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/List/Search/Angular/index.html
+++ b/apps/demos/Demos/List/Search/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/List/Selection/Angular/app/app.component.ts b/apps/demos/Demos/List/Selection/Angular/app/app.component.ts
index bd4e620d855e..3873fce0da36 100644
--- a/apps/demos/Demos/List/Selection/Angular/app/app.component.ts
+++ b/apps/demos/Demos/List/Selection/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import {
-  ChangeDetectorRef, Component, enableProdMode, provideZoneChangeDetection,
+  ChangeDetectorRef, Component, enableProdMode,
 } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { DataSource, ArrayStore } from 'devextreme-angular/common/data';
@@ -51,8 +51,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/List/Selection/Angular/index.html b/apps/demos/Demos/List/Selection/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/List/Selection/Angular/index.html
+++ b/apps/demos/Demos/List/Selection/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/List/WebAPI/Angular/app/app.component.ts b/apps/demos/Demos/List/WebAPI/Angular/app/app.component.ts
index b0a1e40d572f..550b139d1437 100644
--- a/apps/demos/Demos/List/WebAPI/Angular/app/app.component.ts
+++ b/apps/demos/Demos/List/WebAPI/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { CurrencyPipe } from '@angular/common';
 import { DxListModule } from 'devextreme-angular';
 import { DataSource } from 'devextreme-angular/common/data';
@@ -31,8 +31,4 @@ export class AppComponent {
   });
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/List/WebAPI/Angular/index.html b/apps/demos/Demos/List/WebAPI/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/List/WebAPI/Angular/index.html
+++ b/apps/demos/Demos/List/WebAPI/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Menu/Overview/Angular/app/app.component.ts b/apps/demos/Demos/Menu/Overview/Angular/app/app.component.ts
index 5b8957c01325..59e8442306ca 100644
--- a/apps/demos/Demos/Menu/Overview/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Menu/Overview/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxSelectBoxModule, DxCheckBoxModule } from 'devextreme-angular';
 import { DxMenuModule, type DxMenuTypes } from 'devextreme-angular/ui/menu';
 
@@ -51,8 +51,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Menu/Overview/Angular/index.html b/apps/demos/Demos/Menu/Overview/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Menu/Overview/Angular/index.html
+++ b/apps/demos/Demos/Menu/Overview/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Menu/Scrolling/Angular/app/app.component.ts b/apps/demos/Demos/Menu/Scrolling/Angular/app/app.component.ts
index 1f0e0eaaa9f7..647cbb981f06 100644
--- a/apps/demos/Demos/Menu/Scrolling/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Menu/Scrolling/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxCheckBoxModule } from 'devextreme-angular';
 import { DxMenuModule, type DxMenuTypes } from 'devextreme-angular/ui/menu';
 import notify from 'devextreme/ui/notify';
@@ -42,8 +42,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Menu/Scrolling/Angular/index.html b/apps/demos/Demos/Menu/Scrolling/Angular/index.html
index 3f08cd754b29..48057291a23e 100644
--- a/apps/demos/Demos/Menu/Scrolling/Angular/index.html
+++ b/apps/demos/Demos/Menu/Scrolling/Angular/index.html
@@ -9,7 +9,6 @@
   </head>
   <body class="dx-viewport">
     <demo-app>Loading...</demo-app>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/MultiView/Overview/Angular/app/app.component.ts b/apps/demos/Demos/MultiView/Overview/Angular/app/app.component.ts
index 06bf8d7ae376..f8f424631c5b 100644
--- a/apps/demos/Demos/MultiView/Overview/Angular/app/app.component.ts
+++ b/apps/demos/Demos/MultiView/Overview/Angular/app/app.component.ts
@@ -1,4 +1,4 @@
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 
 import { DxMultiViewModule, DxCheckBoxModule } from 'devextreme-angular';
@@ -37,8 +37,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/MultiView/Overview/Angular/index.html b/apps/demos/Demos/MultiView/Overview/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/MultiView/Overview/Angular/index.html
+++ b/apps/demos/Demos/MultiView/Overview/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Pagination/Overview/Angular/app/app.component.ts b/apps/demos/Demos/Pagination/Overview/Angular/app/app.component.ts
index 7d690335e3fc..27f35267a38c 100644
--- a/apps/demos/Demos/Pagination/Overview/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Pagination/Overview/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxPaginationModule } from 'devextreme-angular';
 import { Employee, Service } from './app.service';
 import { EmployeeCard } from './employee-card/employee-card.component';
@@ -56,8 +56,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Pagination/Overview/Angular/index.html b/apps/demos/Demos/Pagination/Overview/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Pagination/Overview/Angular/index.html
+++ b/apps/demos/Demos/Pagination/Overview/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Resizable/Overview/Angular/app/app.component.ts b/apps/demos/Demos/Resizable/Overview/Angular/app/app.component.ts
index 58fde1b5e12c..3d8a784e482a 100644
--- a/apps/demos/Demos/Resizable/Overview/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Resizable/Overview/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, ViewEncapsulation, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode, ViewEncapsulation } from '@angular/core';
 import {
   DxResizableModule,
   DxDataGridModule,
@@ -48,8 +48,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Resizable/Overview/Angular/index.html b/apps/demos/Demos/Resizable/Overview/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Resizable/Overview/Angular/index.html
+++ b/apps/demos/Demos/Resizable/Overview/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/ResponsiveBox/Overview/Angular/app/app.component.ts b/apps/demos/Demos/ResponsiveBox/Overview/Angular/app/app.component.ts
index 3522a8854d35..da573bd47e68 100644
--- a/apps/demos/Demos/ResponsiveBox/Overview/Angular/app/app.component.ts
+++ b/apps/demos/Demos/ResponsiveBox/Overview/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxResponsiveBoxModule } from 'devextreme-angular';
 
 if (!/localhost/.test(document.location.host)) {
@@ -20,8 +20,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/ResponsiveBox/Overview/Angular/index.html b/apps/demos/Demos/ResponsiveBox/Overview/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/ResponsiveBox/Overview/Angular/index.html
+++ b/apps/demos/Demos/ResponsiveBox/Overview/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/ScrollView/Overview/Angular/app/app.component.ts b/apps/demos/Demos/ScrollView/Overview/Angular/app/app.component.ts
index e30f1a3b74b2..26ed3939c15b 100644
--- a/apps/demos/Demos/ScrollView/Overview/Angular/app/app.component.ts
+++ b/apps/demos/Demos/ScrollView/Overview/Angular/app/app.component.ts
@@ -5,7 +5,6 @@ import {
   ViewChild,
   AfterViewInit,
   enableProdMode,
-  provideZoneChangeDetection,
 } from '@angular/core';
 import { DxSelectBoxModule } from 'devextreme-angular';
 import { DxCheckBoxModule, DxCheckBoxTypes } from 'devextreme-angular/ui/check-box';
@@ -91,8 +90,4 @@ export class AppComponent implements AfterViewInit {
   };
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/ScrollView/Overview/Angular/index.html b/apps/demos/Demos/ScrollView/Overview/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/ScrollView/Overview/Angular/index.html
+++ b/apps/demos/Demos/ScrollView/Overview/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Sortable/Customization/Angular/app/app.component.ts b/apps/demos/Demos/Sortable/Customization/Angular/app/app.component.ts
index bc1572198138..141dc7a52493 100644
--- a/apps/demos/Demos/Sortable/Customization/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Sortable/Customization/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxScrollViewModule, DxNumberBoxModule } from 'devextreme-angular';
 import { DxSortableModule, DxSortableTypes } from 'devextreme-angular/ui/sortable';
 import { DxSelectBoxModule, DxSelectBoxTypes } from 'devextreme-angular/ui/select-box';
@@ -73,8 +73,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Sortable/Customization/Angular/index.html b/apps/demos/Demos/Sortable/Customization/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Sortable/Customization/Angular/index.html
+++ b/apps/demos/Demos/Sortable/Customization/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Sortable/Kanban/Angular/app/app.component.ts b/apps/demos/Demos/Sortable/Kanban/Angular/app/app.component.ts
index 78f70df903b0..1101079145cc 100644
--- a/apps/demos/Demos/Sortable/Kanban/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Sortable/Kanban/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxScrollViewModule, DxSortableModule } from 'devextreme-angular';
 import { DxSortableTypes } from 'devextreme-angular/ui/sortable';
 import { Employee, Task, Service } from './app.service';
@@ -56,8 +56,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Sortable/Kanban/Angular/index.html b/apps/demos/Demos/Sortable/Kanban/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Sortable/Kanban/Angular/index.html
+++ b/apps/demos/Demos/Sortable/Kanban/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Splitter/Overview/Angular/app/app.component.ts b/apps/demos/Demos/Splitter/Overview/Angular/app/app.component.ts
index d474dc4d92be..be6dcc93c1b7 100644
--- a/apps/demos/Demos/Splitter/Overview/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Splitter/Overview/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { ChangeDetectionStrategy, Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { ChangeDetectionStrategy, Component, enableProdMode } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
 import { DxSplitterModule } from 'devextreme-angular';
 
@@ -51,8 +51,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Splitter/Overview/Angular/index.html b/apps/demos/Demos/Splitter/Overview/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Splitter/Overview/Angular/index.html
+++ b/apps/demos/Demos/Splitter/Overview/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Stepper/FormIntegration/Angular/app/app.component.ts b/apps/demos/Demos/Stepper/FormIntegration/Angular/app/app.component.ts
index 7665c3eb1db2..312b34c977eb 100644
--- a/apps/demos/Demos/Stepper/FormIntegration/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Stepper/FormIntegration/Angular/app/app.component.ts
@@ -2,7 +2,6 @@ import { bootstrapApplication } from '@angular/platform-browser';
 import {
   Component,
   enableProdMode,
-  provideZoneChangeDetection,
 } from '@angular/core';
 import {
   DxButtonModule,
@@ -146,7 +145,6 @@ export class AppComponent {
 
 bootstrapApplication(AppComponent, {
   providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
     AppService,
   ],
 });
diff --git a/apps/demos/Demos/Stepper/FormIntegration/Angular/index.html b/apps/demos/Demos/Stepper/FormIntegration/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Stepper/FormIntegration/Angular/index.html
+++ b/apps/demos/Demos/Stepper/FormIntegration/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Stepper/Overview/Angular/app/app.component.ts b/apps/demos/Demos/Stepper/Overview/Angular/app/app.component.ts
index 879fcfd41df1..a39e8f3c130f 100644
--- a/apps/demos/Demos/Stepper/Overview/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Stepper/Overview/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxButtonGroupModule, type DxButtonGroupTypes } from 'devextreme-angular/ui/button-group';
 import { DxCheckBoxModule, type DxCheckBoxTypes } from 'devextreme-angular/ui/check-box';
 import { DxStepperModule, type DxStepperTypes } from 'devextreme-angular/ui/stepper';
@@ -63,7 +63,6 @@ export class AppComponent {
 
 bootstrapApplication(AppComponent, {
   providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
     AppService,
   ],
 });
diff --git a/apps/demos/Demos/Stepper/Overview/Angular/index.html b/apps/demos/Demos/Stepper/Overview/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Stepper/Overview/Angular/index.html
+++ b/apps/demos/Demos/Stepper/Overview/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Stepper/StepTemplate/Angular/app/app.component.ts b/apps/demos/Demos/Stepper/StepTemplate/Angular/app/app.component.ts
index ed0073a7735e..336cf89e7501 100644
--- a/apps/demos/Demos/Stepper/StepTemplate/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Stepper/StepTemplate/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxStepperModule } from 'devextreme-angular';
 import { type DxStepperTypes } from 'devextreme-angular/ui/stepper';
 import { AppService } from './app.service';
@@ -26,7 +26,6 @@ export class AppComponent {
 
 bootstrapApplication(AppComponent, {
   providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
     AppService,
   ],
 });
diff --git a/apps/demos/Demos/Stepper/StepTemplate/Angular/index.html b/apps/demos/Demos/Stepper/StepTemplate/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Stepper/StepTemplate/Angular/index.html
+++ b/apps/demos/Demos/Stepper/StepTemplate/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/TabPanel/DragAndDrop/Angular/app/app.component.ts b/apps/demos/Demos/TabPanel/DragAndDrop/Angular/app/app.component.ts
index 0d26cd4c26d7..d9d159847f17 100644
--- a/apps/demos/Demos/TabPanel/DragAndDrop/Angular/app/app.component.ts
+++ b/apps/demos/Demos/TabPanel/DragAndDrop/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import {
   DxButtonModule, DxSortableModule, DxTabPanelModule, DxListModule,
 } from 'devextreme-angular';
@@ -95,8 +95,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/TabPanel/DragAndDrop/Angular/index.html b/apps/demos/Demos/TabPanel/DragAndDrop/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/TabPanel/DragAndDrop/Angular/index.html
+++ b/apps/demos/Demos/TabPanel/DragAndDrop/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/TabPanel/Overview/Angular/app/app.component.ts b/apps/demos/Demos/TabPanel/Overview/Angular/app/app.component.ts
index 2e39d85c87e7..e04302cfd6f2 100644
--- a/apps/demos/Demos/TabPanel/Overview/Angular/app/app.component.ts
+++ b/apps/demos/Demos/TabPanel/Overview/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import {
   DxTabPanelModule, DxCheckBoxModule, DxSelectBoxModule,
 } from 'devextreme-angular';
@@ -51,8 +51,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/TabPanel/Overview/Angular/index.html b/apps/demos/Demos/TabPanel/Overview/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/TabPanel/Overview/Angular/index.html
+++ b/apps/demos/Demos/TabPanel/Overview/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/TabPanel/Templates/Angular/app/app.component.ts b/apps/demos/Demos/TabPanel/Templates/Angular/app/app.component.ts
index 084e6da5667d..933bef810f68 100644
--- a/apps/demos/Demos/TabPanel/Templates/Angular/app/app.component.ts
+++ b/apps/demos/Demos/TabPanel/Templates/Angular/app/app.component.ts
@@ -1,6 +1,6 @@
 import { bootstrapApplication } from '@angular/platform-browser';
 import {
-  ChangeDetectorRef, Component, enableProdMode, provideZoneChangeDetection,
+  ChangeDetectorRef, Component, enableProdMode,
 } from '@angular/core';
 import { DxTabPanelModule, DxCheckBoxModule } from 'devextreme-angular';
 import { Company, Service } from './app.service';
@@ -35,8 +35,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/TabPanel/Templates/Angular/index.html b/apps/demos/Demos/TabPanel/Templates/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/TabPanel/Templates/Angular/index.html
+++ b/apps/demos/Demos/TabPanel/Templates/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Tabs/Overview/Angular/app/app.component.ts b/apps/demos/Demos/Tabs/Overview/Angular/app/app.component.ts
index a04b16d15d5e..04f7433265b8 100644
--- a/apps/demos/Demos/Tabs/Overview/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Tabs/Overview/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, ViewChild, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode, ViewChild } from '@angular/core';
 import { DxSelectBoxModule, DxSelectBoxTypes } from 'devextreme-angular/ui/select-box';
 import { DxCheckBoxModule, DxCheckBoxTypes } from 'devextreme-angular/ui/check-box';
 import { DxTabsModule, DxTabsComponent, DxTabsTypes } from 'devextreme-angular/ui/tabs';
@@ -85,8 +85,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Tabs/Overview/Angular/index.html b/apps/demos/Demos/Tabs/Overview/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Tabs/Overview/Angular/index.html
+++ b/apps/demos/Demos/Tabs/Overview/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Tabs/Selection/Angular/app/app.component.ts b/apps/demos/Demos/Tabs/Selection/Angular/app/app.component.ts
index 673ab521d279..acc589dd239d 100644
--- a/apps/demos/Demos/Tabs/Selection/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Tabs/Selection/Angular/app/app.component.ts
@@ -1,7 +1,6 @@
 import {
   Component,
   enableProdMode,
-  provideZoneChangeDetection,
 } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { DxTabsModule, DxSelectBoxModule, DxMultiViewModule } from 'devextreme-angular';
@@ -33,8 +32,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Tabs/Selection/Angular/index.html b/apps/demos/Demos/Tabs/Selection/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Tabs/Selection/Angular/index.html
+++ b/apps/demos/Demos/Tabs/Selection/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/TileView/Basics/Angular/app/app.component.ts b/apps/demos/Demos/TileView/Basics/Angular/app/app.component.ts
index a7fcf335fe16..970143a37e7f 100644
--- a/apps/demos/Demos/TileView/Basics/Angular/app/app.component.ts
+++ b/apps/demos/Demos/TileView/Basics/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxTileViewModule } from 'devextreme-angular';
 import { Home, Service } from './app.service';
 
@@ -24,8 +24,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/TileView/Basics/Angular/index.html b/apps/demos/Demos/TileView/Basics/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/TileView/Basics/Angular/index.html
+++ b/apps/demos/Demos/TileView/Basics/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/TileView/Directions/Angular/app/app.component.ts b/apps/demos/Demos/TileView/Directions/Angular/app/app.component.ts
index 95b8fda7113c..2fd57e339073 100644
--- a/apps/demos/Demos/TileView/Directions/Angular/app/app.component.ts
+++ b/apps/demos/Demos/TileView/Directions/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxTileViewModule, DxSelectBoxModule } from 'devextreme-angular';
 import { Home, Service } from './app.service';
 
@@ -26,8 +26,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/TileView/Directions/Angular/index.html b/apps/demos/Demos/TileView/Directions/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/TileView/Directions/Angular/index.html
+++ b/apps/demos/Demos/TileView/Directions/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/TileView/ItemTemplate/Angular/app/app.component.ts b/apps/demos/Demos/TileView/ItemTemplate/Angular/app/app.component.ts
index edad873d9abe..903c4f031fc3 100644
--- a/apps/demos/Demos/TileView/ItemTemplate/Angular/app/app.component.ts
+++ b/apps/demos/Demos/TileView/ItemTemplate/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { CurrencyPipe } from '@angular/common';
 import { DxTileViewModule, DxSelectBoxModule } from 'devextreme-angular';
 import { Home, Service } from './app.service';
@@ -27,8 +27,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/TileView/ItemTemplate/Angular/index.html b/apps/demos/Demos/TileView/ItemTemplate/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/TileView/ItemTemplate/Angular/index.html
+++ b/apps/demos/Demos/TileView/ItemTemplate/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Toolbar/Adaptability/Angular/app/app.component.ts b/apps/demos/Demos/Toolbar/Adaptability/Angular/app/app.component.ts
index c74ab669bb18..1bd4ea352bba 100644
--- a/apps/demos/Demos/Toolbar/Adaptability/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Toolbar/Adaptability/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, inject, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode, inject } from '@angular/core';
 import {
   DxToolbarModule,
   DxSelectBoxModule,
@@ -94,8 +94,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Toolbar/Adaptability/Angular/index.html b/apps/demos/Demos/Toolbar/Adaptability/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Toolbar/Adaptability/Angular/index.html
+++ b/apps/demos/Demos/Toolbar/Adaptability/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Toolbar/Overview/Angular/app/app.component.ts b/apps/demos/Demos/Toolbar/Overview/Angular/app/app.component.ts
index 3b0247d1c313..90ebd005c6c5 100644
--- a/apps/demos/Demos/Toolbar/Overview/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Toolbar/Overview/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxListModule, DxToolbarModule } from 'devextreme-angular';
 import 'devextreme/ui/select_box';
 import { DataSource } from 'devextreme-angular/common/data';
@@ -97,8 +97,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Toolbar/Overview/Angular/index.html b/apps/demos/Demos/Toolbar/Overview/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Toolbar/Overview/Angular/index.html
+++ b/apps/demos/Demos/Toolbar/Overview/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/TreeView/ContextMenuIntegration/Angular/app/app.component.ts b/apps/demos/Demos/TreeView/ContextMenuIntegration/Angular/app/app.component.ts
index 6e6c887f4425..e5d17824fd5b 100644
--- a/apps/demos/Demos/TreeView/ContextMenuIntegration/Angular/app/app.component.ts
+++ b/apps/demos/Demos/TreeView/ContextMenuIntegration/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, ViewChild, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode, ViewChild } from '@angular/core';
 import { DxListModule } from 'devextreme-angular';
 import { DxTreeViewComponent, DxTreeViewModule, type DxTreeViewTypes } from 'devextreme-angular/ui/tree-view';
 import { DxContextMenuModule, DxContextMenuComponent, type DxContextMenuTypes } from 'devextreme-angular/ui/context-menu';
@@ -80,8 +80,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/TreeView/ContextMenuIntegration/Angular/index.html b/apps/demos/Demos/TreeView/ContextMenuIntegration/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/TreeView/ContextMenuIntegration/Angular/index.html
+++ b/apps/demos/Demos/TreeView/ContextMenuIntegration/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/Angular/app/app.component.ts b/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/Angular/app/app.component.ts
index d2f66eec5b76..abcb79dfe24d 100644
--- a/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/Angular/app/app.component.ts
+++ b/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, ViewChild, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode, ViewChild } from '@angular/core';
 import { DxSortableModule, DxSortableTypes } from 'devextreme-angular/ui/sortable';
 import { DxTreeViewModule, DxTreeViewComponent, DxTreeViewTypes } from 'devextreme-angular/ui/tree-view';
 import { Service, FileSystemItem } from './app.service';
@@ -159,8 +159,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/Angular/index.html b/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/Angular/index.html
+++ b/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/Angular/app/app.component.ts b/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/Angular/app/app.component.ts
index 435f54d73e9f..627fd55c650b 100644
--- a/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/Angular/app/app.component.ts
+++ b/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, ViewChild, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode, ViewChild } from '@angular/core';
 import { DxSortableModule, DxSortableTypes } from 'devextreme-angular/ui/sortable';
 import { DxTreeViewModule, DxTreeViewComponent, DxTreeViewTypes } from 'devextreme-angular/ui/tree-view';
 import { Service, FileSystemItem } from './app.service';
@@ -174,8 +174,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/Angular/index.html b/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/Angular/index.html
+++ b/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/TreeView/FlatDataStructure/Angular/app/app.component.ts b/apps/demos/Demos/TreeView/FlatDataStructure/Angular/app/app.component.ts
index 088628b50888..64764546d7d4 100644
--- a/apps/demos/Demos/TreeView/FlatDataStructure/Angular/app/app.component.ts
+++ b/apps/demos/Demos/TreeView/FlatDataStructure/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxTreeViewModule, DxTreeViewTypes } from 'devextreme-angular/ui/tree-view';
 import { Product, Service } from './app.service';
 
@@ -31,8 +31,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/TreeView/FlatDataStructure/Angular/index.html b/apps/demos/Demos/TreeView/FlatDataStructure/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/TreeView/FlatDataStructure/Angular/index.html
+++ b/apps/demos/Demos/TreeView/FlatDataStructure/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/TreeView/HierarchicalDataStructure/Angular/app/app.component.ts b/apps/demos/Demos/TreeView/HierarchicalDataStructure/Angular/app/app.component.ts
index 088628b50888..64764546d7d4 100644
--- a/apps/demos/Demos/TreeView/HierarchicalDataStructure/Angular/app/app.component.ts
+++ b/apps/demos/Demos/TreeView/HierarchicalDataStructure/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxTreeViewModule, DxTreeViewTypes } from 'devextreme-angular/ui/tree-view';
 import { Product, Service } from './app.service';
 
@@ -31,8 +31,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/TreeView/HierarchicalDataStructure/Angular/index.html b/apps/demos/Demos/TreeView/HierarchicalDataStructure/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/TreeView/HierarchicalDataStructure/Angular/index.html
+++ b/apps/demos/Demos/TreeView/HierarchicalDataStructure/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Angular/app/app.component.ts b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Angular/app/app.component.ts
index d9144afa8cab..94e8d43bba01 100644
--- a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Angular/app/app.component.ts
+++ b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import {
-  AfterViewInit, Component, Pipe, PipeTransform, enableProdMode, ViewChild, provideZoneChangeDetection, ChangeDetectorRef,
+  AfterViewInit, Component, Pipe, PipeTransform, enableProdMode, ViewChild, ChangeDetectorRef,
 } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { DxListModule, DxCheckBoxModule } from 'devextreme-angular';
@@ -106,8 +106,4 @@ export class AppComponent implements AfterViewInit {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Angular/index.html b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Angular/index.html
+++ b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/TreeView/LoadDataOnDemand/Angular/app/app.component.ts b/apps/demos/Demos/TreeView/LoadDataOnDemand/Angular/app/app.component.ts
index 8606f6c1d204..1784c0f09151 100644
--- a/apps/demos/Demos/TreeView/LoadDataOnDemand/Angular/app/app.component.ts
+++ b/apps/demos/Demos/TreeView/LoadDataOnDemand/Angular/app/app.component.ts
@@ -1,4 +1,4 @@
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { HttpClient, provideHttpClient, withFetch } from '@angular/common/http';
 import { lastValueFrom } from 'rxjs';
@@ -31,7 +31,6 @@ export class AppComponent {
 
 bootstrapApplication(AppComponent, {
   providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
     provideHttpClient(withFetch()),
   ],
 });
diff --git a/apps/demos/Demos/TreeView/LoadDataOnDemand/Angular/index.html b/apps/demos/Demos/TreeView/LoadDataOnDemand/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/TreeView/LoadDataOnDemand/Angular/index.html
+++ b/apps/demos/Demos/TreeView/LoadDataOnDemand/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/TreeView/TreeViewWithSearchBar/Angular/app/app.component.ts b/apps/demos/Demos/TreeView/TreeViewWithSearchBar/Angular/app/app.component.ts
index e8e35936cffa..22e1010b196e 100644
--- a/apps/demos/Demos/TreeView/TreeViewWithSearchBar/Angular/app/app.component.ts
+++ b/apps/demos/Demos/TreeView/TreeViewWithSearchBar/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxSelectBoxModule } from 'devextreme-angular';
 import { DxTreeViewModule } from 'devextreme-angular/ui/tree-view';
 import type { DxTreeViewTypes } from 'devextreme-angular/ui/tree-view';
@@ -34,8 +34,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/TreeView/TreeViewWithSearchBar/Angular/index.html b/apps/demos/Demos/TreeView/TreeViewWithSearchBar/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/TreeView/TreeViewWithSearchBar/Angular/index.html
+++ b/apps/demos/Demos/TreeView/TreeViewWithSearchBar/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/TreeView/VirtualMode/Angular/app/app.component.ts b/apps/demos/Demos/TreeView/VirtualMode/Angular/app/app.component.ts
index 71574e1ed667..3b50557777a4 100644
--- a/apps/demos/Demos/TreeView/VirtualMode/Angular/app/app.component.ts
+++ b/apps/demos/Demos/TreeView/VirtualMode/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxTreeViewModule } from 'devextreme-angular';
 import * as AspNetData from 'devextreme-aspnet-data-nojquery';
 
@@ -19,8 +19,4 @@ export class AppComponent {
   });
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/TreeView/VirtualMode/Angular/index.html b/apps/demos/Demos/TreeView/VirtualMode/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/TreeView/VirtualMode/Angular/index.html
+++ b/apps/demos/Demos/TreeView/VirtualMode/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/packages/devextreme-angular/.gitignore b/packages/devextreme-angular/.gitignore
index 850a120dc4da..741d02ab23c6 100644
--- a/packages/devextreme-angular/.gitignore
+++ b/packages/devextreme-angular/.gitignore
@@ -1 +1,2 @@
 metadata
+Chrome_Headless**
diff --git a/packages/devextreme-angular/eslint.config.mjs b/packages/devextreme-angular/eslint.config.mjs
index f2d90d5ea364..2ba5886a93c4 100644
--- a/packages/devextreme-angular/eslint.config.mjs
+++ b/packages/devextreme-angular/eslint.config.mjs
@@ -60,7 +60,7 @@ export default [
     rules: {
       'import/no-cycle': 'warn',
       'no-param-reassign': 'warn',
-      'no-underscore-dangle': 'warn',
+      'no-underscore-dangle': 'off',
       'spellcheck/spell-checker': [1, {
         lang: 'en_US',
         comments: false,
diff --git a/packages/devextreme-angular/karma.common.test.shim.js b/packages/devextreme-angular/karma.common.test.shim.js
index ffd110f4e6c1..2f96a619113f 100644
--- a/packages/devextreme-angular/karma.common.test.shim.js
+++ b/packages/devextreme-angular/karma.common.test.shim.js
@@ -4,7 +4,4 @@ require('core-js/es6');
 require('core-js/client/shim.min');
 require('reflect-metadata');
 
-require('zone.js');
-require('zone.js/testing');
-
 __karma__.loaded = function () {};
diff --git a/packages/devextreme-angular/karma.hydration.test.shim.js b/packages/devextreme-angular/karma.hydration.test.shim.js
index c080d3380edd..26bfa44dd8b9 100644
--- a/packages/devextreme-angular/karma.hydration.test.shim.js
+++ b/packages/devextreme-angular/karma.hydration.test.shim.js
@@ -1,4 +1,4 @@
-require('./karma.common.test.shim');
+require('./karma.zone-polyfills.test.shim');
 
 const testing = require('@angular/core/testing');
 const server = require('@angular/platform-server/testing');
diff --git a/packages/devextreme-angular/karma.server.test.shim.js b/packages/devextreme-angular/karma.server.test.shim.js
index 2ec94db2445b..e9610a09f967 100644
--- a/packages/devextreme-angular/karma.server.test.shim.js
+++ b/packages/devextreme-angular/karma.server.test.shim.js
@@ -1,4 +1,4 @@
-require('./karma.common.test.shim');
+require('./karma.zone-polyfills.test.shim');
 
 const testing = require('@angular/core/testing');
 const server = require('@angular/platform-server/testing');
diff --git a/packages/devextreme-angular/karma.test.shim.js b/packages/devextreme-angular/karma.test.shim.js
index 3b727b730463..a583013927d8 100644
--- a/packages/devextreme-angular/karma.test.shim.js
+++ b/packages/devextreme-angular/karma.test.shim.js
@@ -1,4 +1,4 @@
-require('./karma.common.test.shim');
+require('./karma.zone-polyfills.test.shim');
 
 const testing = require('@angular/core/testing');
 const browser = require('@angular/platform-browser-dynamic/testing');
@@ -9,6 +9,6 @@ testing.TestBed.initTestEnvironment(
   browser.platformBrowserDynamicTesting(),
 );
 
-const context = require.context('./tests/dist', true, /^.\/(?!.*\/(ssr-components|hydration)\.spec\.js$).*\.spec\.js$/);
+const context = require.context('./tests/dist', true, /^.\/(?!zone-modes\/)(?!.*\/(ssr-components|hydration)\.spec\.js$).*\.spec\.js$/);
 context.keys().map(context);
 __karma__.start();
diff --git a/packages/devextreme-angular/karma.zone-polyfills.test.shim.js b/packages/devextreme-angular/karma.zone-polyfills.test.shim.js
new file mode 100644
index 000000000000..a8df54b53b99
--- /dev/null
+++ b/packages/devextreme-angular/karma.zone-polyfills.test.shim.js
@@ -0,0 +1,4 @@
+require('./karma.common.test.shim');
+
+require('zone.js');
+require('zone.js/testing');
diff --git a/packages/devextreme-angular/karma.zone.test.shim.js b/packages/devextreme-angular/karma.zone.test.shim.js
new file mode 100644
index 000000000000..aa5fc82b6aed
--- /dev/null
+++ b/packages/devextreme-angular/karma.zone.test.shim.js
@@ -0,0 +1,14 @@
+require('./karma.zone-polyfills.test.shim');
+
+const testing = require('@angular/core/testing');
+const browser = require('@angular/platform-browser-dynamic/testing');
+const { ZoneTestingModule } = require('./karma.zone-testing.module');
+
+testing.TestBed.initTestEnvironment(
+  [browser.BrowserDynamicTestingModule, ZoneTestingModule],
+  browser.platformBrowserDynamicTesting(),
+);
+
+const context = require.context('./tests/dist/zone-modes', true, /\.spec\.js$/);
+context.keys().map(context);
+__karma__.start();
diff --git a/packages/devextreme-angular/karma.zoneless-testing.module.js b/packages/devextreme-angular/karma.zoneless-testing.module.js
new file mode 100644
index 000000000000..f9d360dbc3dc
--- /dev/null
+++ b/packages/devextreme-angular/karma.zoneless-testing.module.js
@@ -0,0 +1,7 @@
+const { NgModule, provideZonelessChangeDetection } = require('@angular/core');
+
+const ZonelessTestingModule = NgModule({
+  providers: [provideZonelessChangeDetection()],
+})(class ZonelessTestingModule {});
+
+module.exports = { ZonelessTestingModule };
diff --git a/packages/devextreme-angular/karma.zoneless.test.shim.js b/packages/devextreme-angular/karma.zoneless.test.shim.js
new file mode 100644
index 000000000000..d21ce6813ccf
--- /dev/null
+++ b/packages/devextreme-angular/karma.zoneless.test.shim.js
@@ -0,0 +1,18 @@
+require('./karma.common.test.shim');
+
+if (typeof Zone !== 'undefined') {
+  throw new Error('zone.js is loaded in the zoneless test environment');
+}
+
+const testing = require('@angular/core/testing');
+const browser = require('@angular/platform-browser-dynamic/testing');
+const { ZonelessTestingModule } = require('./karma.zoneless-testing.module');
+
+testing.TestBed.initTestEnvironment(
+  [browser.BrowserDynamicTestingModule, ZonelessTestingModule],
+  browser.platformBrowserDynamicTesting(),
+);
+
+const context = require.context('./tests/dist/zone-modes', true, /\.spec\.js$/);
+context.keys().map(context);
+__karma__.start();
diff --git a/packages/devextreme-angular/project.json b/packages/devextreme-angular/project.json
index 3144fe8c6145..784d82cbfc1c 100644
--- a/packages/devextreme-angular/project.json
+++ b/packages/devextreme-angular/project.json
@@ -350,7 +350,9 @@
         "environments": [
           "client",
           "server",
-          "hydration"
+          "hydration",
+          "zone",
+          "zoneless"
         ]
       },
       "dependsOn": [
@@ -428,6 +430,50 @@
         "{projectRoot}/tests/dist/**/*"
       ]
     },
+    "test:components-zone-modes": {
+      "executor": "devextreme-nx-infra-plugin:karma-multi-env",
+      "options": {
+        "karmaConfig": "karma.conf.js",
+        "environments": [
+          "zone",
+          "zoneless"
+        ]
+      },
+      "dependsOn": [
+        "build:tests"
+      ],
+      "inputs": [
+        "default",
+        "test",
+        "{projectRoot}/tests/dist/**/*"
+      ]
+    },
+    "test:components-zone-debug": {
+      "executor": "devextreme-nx-infra-plugin:karma-multi-env",
+      "options": {
+        "karmaConfig": "karma.conf.js",
+        "environments": [
+          "zone"
+        ],
+        "debug": true
+      },
+      "dependsOn": [
+        "build:tests"
+      ]
+    },
+    "test:components-zoneless-debug": {
+      "executor": "devextreme-nx-infra-plugin:karma-multi-env",
+      "options": {
+        "karmaConfig": "karma.conf.js",
+        "environments": [
+          "zoneless"
+        ],
+        "debug": true
+      },
+      "dependsOn": [
+        "build:tests"
+      ]
+    },
     "watch:test": {
       "executor": "devextreme-nx-infra-plugin:karma-multi-env",
       "options": {
@@ -453,7 +499,9 @@
         "environments": [
           "client",
           "server",
-          "hydration"
+          "hydration",
+          "zone",
+          "zoneless"
         ]
       },
       "dependsOn": [
@@ -498,7 +546,12 @@
       "{projectRoot}/karma.test.shim.js",
       "{projectRoot}/karma.server.test.shim.js",
       "{projectRoot}/karma.hydration.test.shim.js",
+      "{projectRoot}/karma.common.test.shim.js",
+      "{projectRoot}/karma.zone-polyfills.test.shim.js",
+      "{projectRoot}/karma.zone.test.shim.js",
+      "{projectRoot}/karma.zoneless.test.shim.js",
       "{projectRoot}/karma.zone-testing.module.js",
+      "{projectRoot}/karma.zoneless-testing.module.js",
       "{projectRoot}/webpack.test.js",
       "{projectRoot}/tsconfig.tests.json",
       "{projectRoot}/src/**/*.spec.ts",
diff --git a/packages/devextreme-angular/src/core/component.ts b/packages/devextreme-angular/src/core/component.ts
index ae9f62957529..3b04bedafeac 100644
--- a/packages/devextreme-angular/src/core/component.ts
+++ b/packages/devextreme-angular/src/core/component.ts
@@ -1,6 +1,8 @@
+/* eslint-disable max-classes-per-file */
 import {
   TransferState,
   makeStateKey,
+  ChangeDetectorRef,
   Component,
   ElementRef,
   NgZone,
@@ -55,6 +57,29 @@ export const getServerStateKey = () => {
   return serverStateKey;
 };
 
+const publicOptionsCache = new WeakMap<object, Set<string>>();
+
+const getPublicOptions = (componentPrototype: object): Set<string> => {
+  let options = publicOptionsCache.get(componentPrototype);
+
+  if (!options) {
+    const names = new Set<string>();
+
+    for (let proto = componentPrototype; proto && proto !== Object.prototype; proto = Object.getPrototypeOf(proto)) {
+      Object.entries(Object.getOwnPropertyDescriptors(proto)).forEach(([name, descriptor]) => {
+        if (descriptor.get && descriptor.set) {
+          names.add(name);
+        }
+      });
+    }
+
+    options = names;
+    publicOptionsCache.set(componentPrototype, options);
+  }
+
+  return options;
+};
+
 @Component({
   template: '',
 })
@@ -86,6 +111,8 @@ export abstract class DxComponent implements OnChanges, OnInit, DoCheck, AfterCo
 
   templateUpdateRequired = false;
 
+  private readonly changeDetectorRef = inject(ChangeDetectorRef);
+
   private _updateTemplates() {
     if (this.templates.length && this.templateUpdateRequired) {
       const updatedTemplates = {};
@@ -105,6 +132,10 @@ export abstract class DxComponent implements OnChanges, OnInit, DoCheck, AfterCo
       const value = e.name === e.fullName ? e.value : e.component.option(e.name);
       this.eventHelper.fireNgEvent(`${e.name}Change`, [value]);
       this.optionChangedHandlers.emit(e);
+
+      if (!this.widgetUpdateLocked && getPublicOptions(Object.getPrototypeOf(this)).has(e.name)) {
+        this.changeDetectorRef.markForCheck();
+      }
     });
   }
 
@@ -122,10 +153,11 @@ export abstract class DxComponent implements OnChanges, OnInit, DoCheck, AfterCo
 
   protected _createEventEmitters(events) {
     const zone = this.ngZone;
+    const { changeDetectorRef } = this;
     this.eventHelper.createEmitters(events);
 
     this._initialOptions.eventsStrategy = (instance) => {
-      const strategy = new NgEventsStrategy(instance, zone);
+      const strategy = new NgEventsStrategy(instance, zone, changeDetectorRef);
 
       events.filter((event) => event.subscribe).forEach((event) => {
         strategy.addEmitter(event.subscribe, this[event.emit]);
@@ -136,7 +168,7 @@ export abstract class DxComponent implements OnChanges, OnInit, DoCheck, AfterCo
 
     this._initialOptions.nestedComponentOptions = function (component) {
       return {
-        eventsStrategy: (instance) => new NgEventsStrategy(instance, zone),
+        eventsStrategy: (instance) => new NgEventsStrategy(instance, zone, changeDetectorRef),
         nestedComponentOptions: component.option('nestedComponentOptions'),
       };
     };
@@ -237,7 +269,7 @@ export abstract class DxComponent implements OnChanges, OnInit, DoCheck, AfterCo
     this.templates = [];
     templateHost.setHost(this);
     this._collectionContainerImpl = new CollectionNestedOptionContainerImpl(this._setOption.bind(this));
-    this.eventHelper = new EmitterHelper(ngZone, this);
+    this.eventHelper = new EmitterHelper(ngZone, this, this.changeDetectorRef);
   }
 
   ngOnChanges(changes: SimpleChanges) {
diff --git a/packages/devextreme-angular/src/core/events-strategy.ts b/packages/devextreme-angular/src/core/events-strategy.ts
index 8d4aad7aad37..de1783bfba20 100644
--- a/packages/devextreme-angular/src/core/events-strategy.ts
+++ b/packages/devextreme-angular/src/core/events-strategy.ts
@@ -1,4 +1,5 @@
-import { EventEmitter, NgZone } from '@angular/core';
+/* eslint-disable max-classes-per-file */
+import { ChangeDetectorRef, EventEmitter, NgZone } from '@angular/core';
 import { DxComponent } from './component';
 
 interface IEventSubscription {
@@ -10,7 +11,11 @@ export class NgEventsStrategy {
 
   private events: { [key: string]: EventEmitter<any> } = {};
 
-  constructor(private readonly instance: any, private readonly zone: NgZone) { }
+  constructor(
+    private readonly instance: any,
+    private readonly zone: NgZone,
+    private readonly changeDetectorRef?: ChangeDetectorRef,
+  ) { }
 
   hasEvent(name: string) {
     return this.getEmitter(name).observers.length !== 0;
@@ -25,6 +30,9 @@ export class NgEventsStrategy {
       } else {
         this.zone.run(() => emitter.next(args?.[0]));
       }
+      if (name !== 'optionChanged' || emitter.observers.length > internalSubs.length) {
+        this.changeDetectorRef?.markForCheck();
+      }
     }
   }
 
@@ -80,7 +88,11 @@ export class NgEventsStrategy {
 export class EmitterHelper {
   lockedValueChangeEvent = false;
 
-  constructor(private readonly zone: NgZone, private component: DxComponent) { }
+  constructor(
+    private readonly zone: NgZone,
+    private component: DxComponent,
+    private readonly changeDetectorRef?: ChangeDetectorRef,
+  ) { }
 
   fireNgEvent(eventName: string, eventArgs: any) {
     if (this.lockedValueChangeEvent && eventName === 'valueChange') {
@@ -91,6 +103,7 @@ export class EmitterHelper {
       this.zone.run(() => {
         emitter.next(eventArgs?.[0]);
       });
+      this.changeDetectorRef?.markForCheck();
     }
   }
 
diff --git a/packages/devextreme-angular/src/core/nested-option.ts b/packages/devextreme-angular/src/core/nested-option.ts
index b54ff6917f22..12beb5b097b1 100644
--- a/packages/devextreme-angular/src/core/nested-option.ts
+++ b/packages/devextreme-angular/src/core/nested-option.ts
@@ -1,3 +1,4 @@
+/* eslint-disable max-classes-per-file */
 import {
   Component, QueryList, ElementRef, Renderer2, EventEmitter,
 } from '@angular/core';
diff --git a/packages/devextreme-angular/tests/src/zone-modes/change-detection.spec.ts b/packages/devextreme-angular/tests/src/zone-modes/change-detection.spec.ts
new file mode 100644
index 000000000000..632a78debafd
--- /dev/null
+++ b/packages/devextreme-angular/tests/src/zone-modes/change-detection.spec.ts
@@ -0,0 +1,438 @@
+/* tslint:disable:component-selector */
+import {
+  Component,
+  ViewChild,
+  signal,
+} from '@angular/core';
+
+import {
+  TestBed,
+  ComponentFixture,
+} from '@angular/core/testing';
+
+import {
+  DxTextBoxModule,
+  DxTextBoxComponent,
+  DxDataGridModule,
+  DxDataGridComponent,
+  DxPopupModule,
+  DxPopupComponent,
+  DxFormModule,
+  DxFormComponent,
+  DxListModule,
+  DxListComponent,
+  DxTemplateModule,
+  DxDraggableModule,
+  DxChartModule,
+} from 'devextreme-angular';
+
+const isZoneless = typeof (window as any).Zone === 'undefined';
+const mode = isZoneless ? 'zoneless' : 'zone';
+
+@Component({
+  selector: 'test-host',
+  imports: [
+    DxTextBoxModule, DxDataGridModule, DxPopupModule, DxFormModule, DxListModule,
+    DxTemplateModule, DxDraggableModule, DxChartModule,
+  ],
+  template: '',
+})
+class TestHostComponent {
+  @ViewChild(DxTextBoxComponent) textBox: DxTextBoxComponent;
+
+  @ViewChild(DxDataGridComponent) grid: DxDataGridComponent;
+
+  @ViewChild(DxPopupComponent) popup: DxPopupComponent;
+
+  @ViewChild(DxFormComponent) form: DxFormComponent;
+
+  @ViewChild(DxListComponent) list: DxListComponent;
+
+  text = signal('');
+
+  plain = '';
+
+  selectedKeys = signal<number[]>([]);
+
+  visible = signal(true);
+
+  pageIndex = signal(0);
+
+  suffix = signal('1');
+
+  clicks = 0;
+
+  dragMoves = 0;
+
+  renders = 0;
+
+  rows = [{ id: 1 }, { id: 2 }, { id: 3 }];
+
+  points = [{ arg: 1, val: 1 }, { arg: 2, val: 3 }, { arg: 3, val: 2 }];
+
+  items = ['a', 'b'];
+
+  formData = { name: 'initial' };
+
+  countRender(): string {
+    this.renders += 1;
+    return '';
+  }
+}
+
+async function render(template: string): Promise<ComponentFixture<TestHostComponent>> {
+  TestBed.configureTestingModule({ imports: [TestHostComponent] });
+  TestBed.overrideComponent(TestHostComponent, { set: { template } });
+
+  const fixture = TestBed.createComponent(TestHostComponent);
+  if (!isZoneless) {
+    fixture.autoDetectChanges();
+  }
+  await fixture.whenStable();
+
+  return fixture;
+}
+
+// Runs a widget-side change the way it arrives in a real app: in a zone app user
+// interaction runs inside the Angular zone, in a zoneless app there is no zone.
+function act<T>(fixture: ComponentFixture<TestHostComponent>, fn: () => T): T {
+  return isZoneless ? fn() : fixture.ngZone.run(fn);
+}
+
+function outputText(fixture: ComponentFixture<TestHostComponent>): string {
+  return fixture.nativeElement.querySelector('.out').textContent.trim();
+}
+
+function mouse(target: EventTarget, type: string, x: number, y: number): void {
+  target.dispatchEvent(new MouseEvent(type, {
+    bubbles: true, cancelable: true, button: 0, buttons: 1, clientX: x, clientY: y,
+  }));
+}
+
+const wait = (ms: number) => new Promise((resolve) => { setTimeout(resolve, ms); });
+
+describe(`Change detection [${mode}]: environment`, () => {
+  it(isZoneless ? 'runs without zone.js' : 'runs with zone.js', () => {
+    expect(typeof (window as any).Zone).toBe(isZoneless ? 'undefined' : 'function');
+  });
+
+  if (isZoneless) {
+    it('does not refresh the view without a change detection trigger', async () => {
+      const fixture = await render(`
+        <dx-text-box></dx-text-box>
+        <span class="out">{{ plain }}</span>
+      `);
+
+      fixture.componentInstance.plain = 'changed';
+      await wait(50);
+      await fixture.whenStable();
+
+      expect(outputText(fixture)).toBe('');
+    });
+  }
+});
+
+describe(`Change detection [${mode}]: template-bound outputs`, () => {
+  it('[(value)] bound to a signal receives a widget-side change', async () => {
+    const fixture = await render(`
+      <dx-text-box [(value)]="text"></dx-text-box>
+      <span class="out">{{ text() }}</span>
+    `);
+
+    act(fixture, () => fixture.componentInstance.textBox.instance.option('value', 'changed'));
+    await fixture.whenStable();
+
+    expect(fixture.componentInstance.text()).toBe('changed');
+    expect(outputText(fixture)).toBe('changed');
+  });
+
+  it('[(value)] bound to a plain field receives a widget-side change', async () => {
+    const fixture = await render(`
+      <dx-text-box [(value)]="plain"></dx-text-box>
+      <span class="out">{{ plain }}</span>
+    `);
+
+    act(fixture, () => fixture.componentInstance.textBox.instance.option('value', 'changed'));
+    await fixture.whenStable();
+
+    expect(outputText(fixture)).toBe('changed');
+  });
+
+  it('(onValueChanged) handler that sets a plain field updates the view', async () => {
+    const fixture = await render(`
+      <dx-text-box (onValueChanged)="plain = $event.value"></dx-text-box>
+      <span class="out">{{ plain }}</span>
+    `);
+
+    act(fixture, () => fixture.componentInstance.textBox.instance.option('value', 'changed'));
+    await fixture.whenStable();
+
+    expect(outputText(fixture)).toBe('changed');
+  });
+
+  it('[(selectedRowKeys)] receives a selection made by the grid', async () => {
+    const fixture = await render(`
+      <dx-data-grid [dataSource]="rows" keyExpr="id" [(selectedRowKeys)]="selectedKeys">
+        <dxo-selection mode="multiple"></dxo-selection>
+      </dx-data-grid>
+      <span class="out">{{ selectedKeys().join(',') }}</span>
+    `);
+
+    await act(fixture, () => fixture.componentInstance.grid.instance.selectRows([2], false));
+    await fixture.whenStable();
+
+    expect(outputText(fixture)).toBe('2');
+  });
+
+  it('[(visible)] receives a popup closed by the widget', async () => {
+    const fixture = await render(`
+      <dx-popup [(visible)]="visible"></dx-popup>
+      <span class="out">{{ visible() }}</span>
+    `);
+
+    act(fixture, () => fixture.componentInstance.popup.instance.option('visible', false));
+    await fixture.whenStable();
+
+    expect(outputText(fixture)).toBe('false');
+  });
+
+  it('nested option [(pageIndex)] receives a page change made by the grid', async () => {
+    const fixture = await render(`
+      <dx-data-grid [dataSource]="rows" keyExpr="id">
+        <dxo-paging [pageSize]="1" [(pageIndex)]="pageIndex"></dxo-paging>
+      </dx-data-grid>
+      <span class="out">{{ pageIndex() }}</span>
+    `);
+
+    await act(fixture, () => fixture.componentInstance.grid.instance.pageIndex(2));
+    await fixture.whenStable();
+
+    expect(outputText(fixture)).toBe('2');
+  });
+});
+
+describe(`Change detection [${mode}]: events registered outside the Angular zone (mousemove)`, () => {
+  it('(onDragMove) driven by mousemove updates the view', async () => {
+    const fixture = await render(`
+      <dx-draggable (onDragMove)="dragMoves = dragMoves + 1">
+        <div class="drag-handle" style="width: 50px; height: 50px;"></div>
+      </dx-draggable>
+      <span class="out">{{ dragMoves > 0 }}</span>
+    `);
+    const handle = fixture.nativeElement.querySelector('.drag-handle');
+
+    mouse(handle, 'mousedown', 10, 10);
+    await fixture.whenStable();
+
+    mouse(document, 'mousemove', 40, 40);
+    mouse(document, 'mousemove', 60, 60);
+    await fixture.whenStable();
+
+    expect(fixture.componentInstance.dragMoves).toBeGreaterThan(0);
+    expect(outputText(fixture)).toBe('true');
+
+    mouse(document, 'mouseup', 60, 60);
+  });
+
+  it('mouse movement over a widget without handlers does not run change detection', async () => {
+    const fixture = await render(`
+      <dx-chart [dataSource]="points">
+        <dxo-animation [enabled]="false"></dxo-animation>
+        <dxi-series argumentField="arg" valueField="val"></dxi-series>
+      </dx-chart>
+      <span class="out">{{ countRender() }}</span>
+    `);
+    const host = fixture.componentInstance;
+    const surface = fixture.nativeElement.querySelector('dx-chart svg');
+    const rendersBefore = host.renders;
+
+    for (let i = 0; i < 20; i += 1) {
+      mouse(surface, 'mouseover', 10 + i * 5, 10 + i * 5);
+      mouse(surface, 'mousemove', 10 + i * 5, 10 + i * 5);
+      mouse(surface, 'mouseout', 10 + i * 5, 10 + i * 5);
+    }
+    await wait(50);
+    await fixture.whenStable();
+
+    expect(host.renders).toBe(rendersBefore);
+
+    if (!isZoneless) {
+      act(fixture, () => {});
+      await fixture.whenStable();
+
+      expect(host.renders).toBeGreaterThan(rendersBefore);
+    }
+  });
+});
+
+if (isZoneless) {
+  describe(`Change detection [${mode}]: widget-internal state`, () => {
+    it('hovering over List items does not run change detection', async () => {
+      const fixture = await render(`
+        <dx-list [items]="items" [hoverStateEnabled]="true"></dx-list>
+        <span class="out">{{ countRender() }}</span>
+      `);
+      const host = fixture.componentInstance;
+      const listItems = fixture.nativeElement.querySelectorAll('.dx-list-item');
+      const rendersBefore = host.renders;
+
+      listItems.forEach((item: Element) => {
+        mouse(item, 'mouseover', 5, 5);
+        mouse(item, 'mouseenter', 5, 5);
+      });
+      const hovered = host.list.instance.option('hoveredElement');
+      await wait(50);
+      await fixture.whenStable();
+
+      expect(hovered).toBeTruthy();
+      expect(host.renders).toBe(rendersBefore);
+    });
+  });
+}
+
+describe(`Change detection [${mode}]: dxTemplate content`, () => {
+  it('re-renders when a parent signal used in the template changes', async () => {
+    const fixture = await render(`
+      <dx-list [items]="items">
+        <div *dxTemplate="let item of 'item'"><span class="tpl">{{ item }}-{{ suffix() }}</span></div>
+      </dx-list>
+    `);
+
+    act(fixture, () => fixture.componentInstance.suffix.set('2'));
+    await fixture.whenStable();
+
+    expect(fixture.nativeElement.querySelector('.tpl').textContent).toBe('a-2');
+  });
+
+  it('updates the view after a (click) handler inside the template', async () => {
+    const fixture = await render(`
+      <dx-list [items]="items">
+        <div *dxTemplate="let item of 'item'"><button class="tpl-btn" (click)="clicks = clicks + 1"></button></div>
+      </dx-list>
+      <span class="out">{{ clicks }}</span>
+    `);
+
+    fixture.nativeElement.querySelector('.tpl-btn').click();
+    await fixture.whenStable();
+
+    expect(outputText(fixture)).toBe('1');
+  });
+});
+
+describe(`Change detection [${mode}]: state changed without a template binding`, () => {
+  it('output subscribed in code updates the view', async () => {
+    const fixture = await render(`
+      <dx-data-grid [dataSource]="rows" keyExpr="id">
+        <dxo-selection mode="multiple"></dxo-selection>
+      </dx-data-grid>
+      <span class="out">{{ plain }}</span>
+    `);
+    const host = fixture.componentInstance;
+
+    host.grid.onSelectionChanged.subscribe((e) => { host.plain = e.selectedRowKeys.join(','); });
+    await act(fixture, () => host.grid.instance.selectRows([2], false));
+    await fixture.whenStable();
+
+    expect(host.plain).toBe('2');
+    expect(outputText(fixture)).toBe('2');
+  });
+
+  it('handler attached with instance.on() updates the view', async () => {
+    const fixture = await render(`
+      <dx-data-grid [dataSource]="rows" keyExpr="id">
+        <dxo-selection mode="multiple"></dxo-selection>
+      </dx-data-grid>
+      <span class="out">{{ plain }}</span>
+    `);
+    const host = fixture.componentInstance;
+
+    host.grid.instance.on('selectionChanged', (e) => { host.plain = e.selectedRowKeys.join(','); });
+    await act(fixture, () => host.grid.instance.selectRows([2], false));
+    await fixture.whenStable();
+
+    expect(host.plain).toBe('2');
+    expect(outputText(fixture)).toBe('2');
+  });
+
+  it('onOptionChanged subscribed in code updates the view for an unbound option', async () => {
+    const fixture = await render(`
+      <dx-text-box></dx-text-box>
+      <span class="out">{{ plain }}</span>
+    `);
+    const host = fixture.componentInstance;
+
+    host.textBox.onOptionChanged.subscribe((e) => {
+      if (e.name === 'hint') {
+        host.plain = e.value;
+      }
+    });
+    act(fixture, () => host.textBox.instance.option('hint', 'changed'));
+    await fixture.whenStable();
+
+    expect(host.plain).toBe('changed');
+    expect(outputText(fixture)).toBe('changed');
+  });
+
+  it('instance.on(\'optionChanged\') handler for an unbound public option updates the view', async () => {
+    const fixture = await render(`
+      <dx-text-box></dx-text-box>
+      <span class="out">{{ plain }}</span>
+    `);
+    const host = fixture.componentInstance;
+
+    host.textBox.instance.on('optionChanged', (e) => {
+      if (e.name === 'hint') {
+        host.plain = e.value;
+      }
+    });
+    act(fixture, () => host.textBox.instance.option('hint', 'changed'));
+    await wait(50);
+    await fixture.whenStable();
+
+    expect(host.plain).toBe('changed');
+    expect(outputText(fixture)).toBe('changed');
+  });
+
+  it('template reading an unbound component option updates the view', async () => {
+    const fixture = await render(`
+      <dx-data-grid #gridRef [dataSource]="rows" keyExpr="id">
+        <dxo-selection mode="multiple"></dxo-selection>
+      </dx-data-grid>
+      <span class="out">{{ gridRef.selectedRowKeys.length }}</span>
+    `);
+
+    expect(outputText(fixture)).toBe('0');
+
+    await act(fixture, () => fixture.componentInstance.grid.instance.selectRows([2], false));
+    await fixture.whenStable();
+
+    expect(outputText(fixture)).toBe('1');
+  });
+
+  it('one-way [formData] changed in place by the Form updates the view', async () => {
+    const fixture = await render(`
+      <dx-form [formData]="formData"></dx-form>
+      <span class="out">{{ formData.name }}</span>
+    `);
+
+    act(fixture, () => fixture.componentInstance.form.instance.getEditor('name').option('value', 'changed'));
+    await fixture.whenStable();
+
+    expect(fixture.componentInstance.formData.name).toBe('changed');
+    expect(outputText(fixture)).toBe('changed');
+  });
+
+  it(isZoneless
+    ? 'item pushed to a bound array in a timer does not reach the widget (documented limitation)'
+    : 'item pushed to a bound array in a timer reaches the widget', async () => {
+    const fixture = await render(`
+      <dx-list [items]="items"></dx-list>
+    `);
+
+    act(fixture, () => setTimeout(() => fixture.componentInstance.items.push('c')));
+    await wait(50);
+    await fixture.whenStable();
+
+    expect(fixture.nativeElement.querySelectorAll('.dx-list-item').length).toBe(isZoneless ? 2 : 3);
+  });
+});
diff --git a/packages/nx-infra-plugin/src/executors/karma-multi-env/karma-multi-env.impl.ts b/packages/nx-infra-plugin/src/executors/karma-multi-env/karma-multi-env.impl.ts
index 35e23a722189..952c1c852695 100644
--- a/packages/nx-infra-plugin/src/executors/karma-multi-env/karma-multi-env.impl.ts
+++ b/packages/nx-infra-plugin/src/executors/karma-multi-env/karma-multi-env.impl.ts
@@ -82,7 +82,13 @@ function createExecutionOrder(
   }
 
   const order: KarmaEnvironment[] = [];
-  const validEnvironments: KarmaEnvironment[] = ['client', 'server', 'hydration'];
+  const validEnvironments: KarmaEnvironment[] = [
+    'client',
+    'server',
+    'hydration',
+    'zone',
+    'zoneless',
+  ];
 
   for (const environment of validEnvironments) {
     if (environments.includes(environment)) {
diff --git a/packages/nx-infra-plugin/src/executors/karma-multi-env/karma.types.ts b/packages/nx-infra-plugin/src/executors/karma-multi-env/karma.types.ts
index f639c5a31f6f..b6c3d15c31c8 100644
--- a/packages/nx-infra-plugin/src/executors/karma-multi-env/karma.types.ts
+++ b/packages/nx-infra-plugin/src/executors/karma-multi-env/karma.types.ts
@@ -1,4 +1,4 @@
-export type KarmaEnvironment = 'client' | 'server' | 'hydration';
+export type KarmaEnvironment = 'client' | 'server' | 'hydration' | 'zone' | 'zoneless';
 
 export interface EnvironmentConfig {
   shimPath: string;
@@ -14,6 +14,12 @@ export const ENVIRONMENT_CONFIGS: Record<KarmaEnvironment, EnvironmentConfig> =
   hydration: {
     shimPath: 'karma.hydration.test.shim.js',
   },
+  zone: {
+    shimPath: 'karma.zone.test.shim.js',
+  },
+  zoneless: {
+    shimPath: 'karma.zoneless.test.shim.js',
+  },
 };
 
 export const DEFAULT_ENVIRONMENTS: KarmaEnvironment[] = ['client', 'server', 'hydration'];
diff --git a/packages/nx-infra-plugin/src/executors/karma-multi-env/schema.d.ts b/packages/nx-infra-plugin/src/executors/karma-multi-env/schema.d.ts
index 86cabc3c2fe5..ef34f4008093 100644
--- a/packages/nx-infra-plugin/src/executors/karma-multi-env/schema.d.ts
+++ b/packages/nx-infra-plugin/src/executors/karma-multi-env/schema.d.ts
@@ -6,4 +6,4 @@ export interface KarmaMultiEnvExecutorSchema {
   timeout?: number;
 }
 
-export type KarmaEnvironment = 'client' | 'server' | 'hydration';
+export type KarmaEnvironment = 'client' | 'server' | 'hydration' | 'zone' | 'zoneless';
diff --git a/packages/nx-infra-plugin/src/executors/karma-multi-env/schema.json b/packages/nx-infra-plugin/src/executors/karma-multi-env/schema.json
index 869b099e6eee..67d00ee129bd 100644
--- a/packages/nx-infra-plugin/src/executors/karma-multi-env/schema.json
+++ b/packages/nx-infra-plugin/src/executors/karma-multi-env/schema.json
@@ -12,7 +12,7 @@
       "type": "array",
       "items": {
         "type": "string",
-        "enum": ["client", "server", "hydration"]
+        "enum": ["client", "server", "hydration", "zone", "zoneless"]
       },
       "default": ["client", "server", "hydration"]
     },