diff --git a/apps/demos/Demos/CardView/CardTemplate/Angular/app/app.component.ts b/apps/demos/Demos/CardView/CardTemplate/Angular/app/app.component.ts
index cbbedceb1ff3..39f1e5312840 100644
--- a/apps/demos/Demos/CardView/CardTemplate/Angular/app/app.component.ts
+++ b/apps/demos/Demos/CardView/CardTemplate/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 {
   DxCardViewModule,
   DxPopupModule,
@@ -50,8 +50,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/CardView/CardTemplate/Angular/index.html b/apps/demos/Demos/CardView/CardTemplate/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/CardView/CardTemplate/Angular/index.html
+++ b/apps/demos/Demos/CardView/CardTemplate/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/CardView/ColumnChooser/Angular/app/app.component.ts b/apps/demos/Demos/CardView/ColumnChooser/Angular/app/app.component.ts
index b02c85edfd84..e27e6474dc65 100644
--- a/apps/demos/Demos/CardView/ColumnChooser/Angular/app/app.component.ts
+++ b/apps/demos/Demos/CardView/ColumnChooser/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 { DxCardViewModule, DxSelectBoxModule, DxCheckBoxModule } from 'devextreme-angular';
 import { Employee, Service } from './app.service';
 
@@ -48,8 +48,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/CardView/ColumnChooser/Angular/index.html b/apps/demos/Demos/CardView/ColumnChooser/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/CardView/ColumnChooser/Angular/index.html
+++ b/apps/demos/Demos/CardView/ColumnChooser/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/CardView/ColumnHeaderFilter/Angular/app/app.component.ts b/apps/demos/Demos/CardView/ColumnHeaderFilter/Angular/app/app.component.ts
index db658a41e310..377484e38a93 100644
--- a/apps/demos/Demos/CardView/ColumnHeaderFilter/Angular/app/app.component.ts
+++ b/apps/demos/Demos/CardView/ColumnHeaderFilter/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 { DxCardViewModule, DxCardViewTypes } from 'devextreme-angular/ui/card-view';
 import { Order, Service } from './app.service';
 
@@ -76,8 +76,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/CardView/ColumnHeaderFilter/Angular/index.html b/apps/demos/Demos/CardView/ColumnHeaderFilter/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/CardView/ColumnHeaderFilter/Angular/index.html
+++ b/apps/demos/Demos/CardView/ColumnHeaderFilter/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/CardView/ColumnReordering/Angular/app/app.component.ts b/apps/demos/Demos/CardView/ColumnReordering/Angular/app/app.component.ts
index df4511c27e7b..b6c0129d3c1a 100644
--- a/apps/demos/Demos/CardView/ColumnReordering/Angular/app/app.component.ts
+++ b/apps/demos/Demos/CardView/ColumnReordering/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 { DxCardViewModule } from 'devextreme-angular';
 import { Order, Service } from './app.service';
 
@@ -23,8 +23,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/CardView/ColumnReordering/Angular/index.html b/apps/demos/Demos/CardView/ColumnReordering/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/CardView/ColumnReordering/Angular/index.html
+++ b/apps/demos/Demos/CardView/ColumnReordering/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/CardView/DataValidation/Angular/app/app.component.ts b/apps/demos/Demos/CardView/DataValidation/Angular/app/app.component.ts
index 0ae9cc6572d8..4f3bdbff4420 100644
--- a/apps/demos/Demos/CardView/DataValidation/Angular/app/app.component.ts
+++ b/apps/demos/Demos/CardView/DataValidation/Angular/app/app.component.ts
@@ -1,6 +1,6 @@
 import { bootstrapApplication } from '@angular/platform-browser';
 import { HttpClient, provideHttpClient, withFetch } from '@angular/common/http';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxCardViewModule } from 'devextreme-angular';
 import 'devextreme/ui/text_area';
 import { lastValueFrom } from 'rxjs';
@@ -66,7 +66,6 @@ export class AppComponent {
 
 bootstrapApplication(AppComponent, {
   providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
     provideHttpClient(withFetch()),
   ],
 });
diff --git a/apps/demos/Demos/CardView/DataValidation/Angular/index.html b/apps/demos/Demos/CardView/DataValidation/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/CardView/DataValidation/Angular/index.html
+++ b/apps/demos/Demos/CardView/DataValidation/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/CardView/FieldTemplate/Angular/app/app.component.ts b/apps/demos/Demos/CardView/FieldTemplate/Angular/app/app.component.ts
index e25ae0ea863b..5bb089b622f0 100644
--- a/apps/demos/Demos/CardView/FieldTemplate/Angular/app/app.component.ts
+++ b/apps/demos/Demos/CardView/FieldTemplate/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 {
   DxCardViewModule,
 } from 'devextreme-angular';
@@ -35,7 +35,6 @@ export class AppComponent {
 
 bootstrapApplication(AppComponent, {
   providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
     Service,
   ],
 });
diff --git a/apps/demos/Demos/CardView/FieldTemplate/Angular/index.html b/apps/demos/Demos/CardView/FieldTemplate/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/CardView/FieldTemplate/Angular/index.html
+++ b/apps/demos/Demos/CardView/FieldTemplate/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/CardView/FilterPanel/Angular/app/app.component.ts b/apps/demos/Demos/CardView/FilterPanel/Angular/app/app.component.ts
index 08842f0cc429..709e2a881494 100644
--- a/apps/demos/Demos/CardView/FilterPanel/Angular/app/app.component.ts
+++ b/apps/demos/Demos/CardView/FilterPanel/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 { DxCardViewModule } from 'devextreme-angular/ui/card-view';
 import { Order, Service } from './app.service';
 
@@ -72,8 +72,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/CardView/FilterPanel/Angular/index.html b/apps/demos/Demos/CardView/FilterPanel/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/CardView/FilterPanel/Angular/index.html
+++ b/apps/demos/Demos/CardView/FilterPanel/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/CardView/Overview/Angular/app/app.component.ts b/apps/demos/Demos/CardView/Overview/Angular/app/app.component.ts
index 0096e0215366..8625bcfdaafd 100644
--- a/apps/demos/Demos/CardView/Overview/Angular/app/app.component.ts
+++ b/apps/demos/Demos/CardView/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 { DxCardViewModule, DxCardViewComponent, DxButtonModule } from 'devextreme-angular';
 import notify from 'devextreme/ui/notify';
 import { AppService, Employee } from './app.service';
@@ -52,7 +52,6 @@ export class AppComponent {
 
 bootstrapApplication(AppComponent, {
   providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
     AppService,
   ],
 });
diff --git a/apps/demos/Demos/CardView/Overview/Angular/index.html b/apps/demos/Demos/CardView/Overview/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/CardView/Overview/Angular/index.html
+++ b/apps/demos/Demos/CardView/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/CardView/PopupEditing/Angular/app/app.component.ts b/apps/demos/Demos/CardView/PopupEditing/Angular/app/app.component.ts
index 4eae8f009f56..cd5c57ed1ba1 100644
--- a/apps/demos/Demos/CardView/PopupEditing/Angular/app/app.component.ts
+++ b/apps/demos/Demos/CardView/PopupEditing/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 { DxCardViewModule } from 'devextreme-angular';
 import 'devextreme/ui/text_area';
 import { Employee, Service } from './app.service';
@@ -43,8 +43,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/CardView/PopupEditing/Angular/index.html b/apps/demos/Demos/CardView/PopupEditing/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/CardView/PopupEditing/Angular/index.html
+++ b/apps/demos/Demos/CardView/PopupEditing/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/CardView/SearchPanel/Angular/app/app.component.ts b/apps/demos/Demos/CardView/SearchPanel/Angular/app/app.component.ts
index 6699ac77e582..4807a22ba456 100644
--- a/apps/demos/Demos/CardView/SearchPanel/Angular/app/app.component.ts
+++ b/apps/demos/Demos/CardView/SearchPanel/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 { DxCardViewModule } from 'devextreme-angular';
 import { Task, Service } from './app.service';
 
@@ -23,8 +23,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/CardView/SearchPanel/Angular/index.html b/apps/demos/Demos/CardView/SearchPanel/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/CardView/SearchPanel/Angular/index.html
+++ b/apps/demos/Demos/CardView/SearchPanel/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/CardView/Selection/Angular/app/app.component.ts b/apps/demos/Demos/CardView/Selection/Angular/app/app.component.ts
index 0a5d1cc446a1..a93f8aca2b8d 100644
--- a/apps/demos/Demos/CardView/Selection/Angular/app/app.component.ts
+++ b/apps/demos/Demos/CardView/Selection/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 { DxCardViewComponent, DxCardViewModule, DxSelectBoxModule, DxCheckBoxModule } from 'devextreme-angular';
 import { Employee, Service } from './app.service';
 
@@ -48,8 +48,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/CardView/Selection/Angular/index.html b/apps/demos/Demos/CardView/Selection/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/CardView/Selection/Angular/index.html
+++ b/apps/demos/Demos/CardView/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/CardView/SimpleArray/Angular/app/app.component.ts b/apps/demos/Demos/CardView/SimpleArray/Angular/app/app.component.ts
index 1ded8d1726a5..e87566664910 100644
--- a/apps/demos/Demos/CardView/SimpleArray/Angular/app/app.component.ts
+++ b/apps/demos/Demos/CardView/SimpleArray/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 { DxCardViewModule } from 'devextreme-angular';
 import { Customer, 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/CardView/SimpleArray/Angular/index.html b/apps/demos/Demos/CardView/SimpleArray/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/CardView/SimpleArray/Angular/index.html
+++ b/apps/demos/Demos/CardView/SimpleArray/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/CardView/Sorting/Angular/app/app.component.ts b/apps/demos/Demos/CardView/Sorting/Angular/app/app.component.ts
index 7b7678ddb159..8d3c5e3ea44e 100644
--- a/apps/demos/Demos/CardView/Sorting/Angular/app/app.component.ts
+++ b/apps/demos/Demos/CardView/Sorting/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 { DxCardViewModule } from 'devextreme-angular';
 import { House, 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/CardView/Sorting/Angular/index.html b/apps/demos/Demos/CardView/Sorting/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/CardView/Sorting/Angular/index.html
+++ b/apps/demos/Demos/CardView/Sorting/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/CardView/WebAPIService/Angular/app/app.component.ts b/apps/demos/Demos/CardView/WebAPIService/Angular/app/app.component.ts
index 1e24974499fc..3a7848db8758 100644
--- a/apps/demos/Demos/CardView/WebAPIService/Angular/app/app.component.ts
+++ b/apps/demos/Demos/CardView/WebAPIService/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 * as AspNetData from 'devextreme-aspnet-data-nojquery';
 import { DxCardViewModule } from 'devextreme-angular';
 import 'devextreme/ui/select_box';
@@ -31,8 +31,4 @@ export class AppComponent {
   });
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/CardView/WebAPIService/Angular/index.html b/apps/demos/Demos/CardView/WebAPIService/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/CardView/WebAPIService/Angular/index.html
+++ b/apps/demos/Demos/CardView/WebAPIService/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/FilterBuilder/Customization/Angular/app/app.component.ts b/apps/demos/Demos/FilterBuilder/Customization/Angular/app/app.component.ts
index 4924e3dfd183..4a7d020f3b8e 100644
--- a/apps/demos/Demos/FilterBuilder/Customization/Angular/app/app.component.ts
+++ b/apps/demos/Demos/FilterBuilder/Customization/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, DxButtonModule, DxTagBoxModule } from 'devextreme-angular';
@@ -81,8 +81,4 @@ export class AppComponent {
   private static getLineBreak = (spaces: number) => `\r\n${new Array(spaces + 1).join(' ')}`;
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/FilterBuilder/Customization/Angular/index.html b/apps/demos/Demos/FilterBuilder/Customization/Angular/index.html
index 9bb26cdb89e8..d47186b6f5fc 100644
--- a/apps/demos/Demos/FilterBuilder/Customization/Angular/index.html
+++ b/apps/demos/Demos/FilterBuilder/Customization/Angular/index.html
@@ -12,7 +12,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/FilterBuilder/WithDataGrid/Angular/app/app.component.ts b/apps/demos/Demos/FilterBuilder/WithDataGrid/Angular/app/app.component.ts
index 738a1b6463e2..3224a5d8213c 100644
--- a/apps/demos/Demos/FilterBuilder/WithDataGrid/Angular/app/app.component.ts
+++ b/apps/demos/Demos/FilterBuilder/WithDataGrid/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 {
   DxDataGridModule,
   DxButtonModule,
@@ -49,8 +49,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/FilterBuilder/WithDataGrid/Angular/index.html b/apps/demos/Demos/FilterBuilder/WithDataGrid/Angular/index.html
index 9bb26cdb89e8..d47186b6f5fc 100644
--- a/apps/demos/Demos/FilterBuilder/WithDataGrid/Angular/index.html
+++ b/apps/demos/Demos/FilterBuilder/WithDataGrid/Angular/index.html
@@ -12,7 +12,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/FilterBuilder/WithList/Angular/app/app.component.ts b/apps/demos/Demos/FilterBuilder/WithList/Angular/app/app.component.ts
index 4d199318c0cf..af3697bd4e20 100644
--- a/apps/demos/Demos/FilterBuilder/WithList/Angular/app/app.component.ts
+++ b/apps/demos/Demos/FilterBuilder/WithList/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 { CurrencyPipe } from '@angular/common';
 import {
   DxListModule,
@@ -52,8 +52,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/FilterBuilder/WithList/Angular/index.html b/apps/demos/Demos/FilterBuilder/WithList/Angular/index.html
index 9bb26cdb89e8..d47186b6f5fc 100644
--- a/apps/demos/Demos/FilterBuilder/WithList/Angular/index.html
+++ b/apps/demos/Demos/FilterBuilder/WithList/Angular/index.html
@@ -12,7 +12,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/PivotGrid/ChartIntegration/Angular/app/app.component.ts b/apps/demos/Demos/PivotGrid/ChartIntegration/Angular/app/app.component.ts
index 7da0ea3bdca0..e9622e233a7e 100644
--- a/apps/demos/Demos/PivotGrid/ChartIntegration/Angular/app/app.component.ts
+++ b/apps/demos/Demos/PivotGrid/ChartIntegration/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, ViewChild, AfterViewInit, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, ViewChild, AfterViewInit, enableProdMode } from '@angular/core';
 import { CurrencyPipe } from '@angular/common';
 import {
   DxPivotGridModule,
@@ -87,8 +87,4 @@ export class AppComponent implements AfterViewInit {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/PivotGrid/ChartIntegration/Angular/index.html b/apps/demos/Demos/PivotGrid/ChartIntegration/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/PivotGrid/ChartIntegration/Angular/index.html
+++ b/apps/demos/Demos/PivotGrid/ChartIntegration/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/PivotGrid/Customization/Angular/app/app.component.ts b/apps/demos/Demos/PivotGrid/Customization/Angular/app/app.component.ts
index 0ad5d90d6a17..1529a567d036 100644
--- a/apps/demos/Demos/PivotGrid/Customization/Angular/app/app.component.ts
+++ b/apps/demos/Demos/PivotGrid/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 { DxPivotGridModule, DxCheckBoxModule } from 'devextreme-angular';
 import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
 import { Service } from './app.service';
@@ -68,8 +68,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/PivotGrid/Customization/Angular/index.html b/apps/demos/Demos/PivotGrid/Customization/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/PivotGrid/Customization/Angular/index.html
+++ b/apps/demos/Demos/PivotGrid/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/PivotGrid/DrillDown/Angular/app/app.component.ts b/apps/demos/Demos/PivotGrid/DrillDown/Angular/app/app.component.ts
index 4b02b5bd7993..11c458578591 100644
--- a/apps/demos/Demos/PivotGrid/DrillDown/Angular/app/app.component.ts
+++ b/apps/demos/Demos/PivotGrid/DrillDown/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 {
   DxDataGridComponent,
   DxDataGridModule,
@@ -80,8 +80,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/PivotGrid/DrillDown/Angular/index.html b/apps/demos/Demos/PivotGrid/DrillDown/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/PivotGrid/DrillDown/Angular/index.html
+++ b/apps/demos/Demos/PivotGrid/DrillDown/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/PivotGrid/ExcelJSCellCustomization/Angular/app/app.component.ts b/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/Angular/app/app.component.ts
index 0828e9f5a347..5394a7556a18 100644
--- a/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/Angular/app/app.component.ts
+++ b/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/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 { Workbook } from 'devextreme-exceljs-fork';
 import { saveAs } from 'file-saver-es';
 // Our demo infrastructure requires us to use 'file-saver-es'. We recommend that you use the official 'file-saver' package in your applications.
@@ -130,8 +130,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/Angular/index.html b/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/Angular/index.html
+++ b/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/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/PivotGrid/ExcelJSOverview/Angular/app/app.component.ts b/apps/demos/Demos/PivotGrid/ExcelJSOverview/Angular/app/app.component.ts
index 0afcc6efe057..a306a9ccf3d6 100644
--- a/apps/demos/Demos/PivotGrid/ExcelJSOverview/Angular/app/app.component.ts
+++ b/apps/demos/Demos/PivotGrid/ExcelJSOverview/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 { Workbook } from 'devextreme-exceljs-fork';
 import { saveAs } from 'file-saver-es';
 // Our demo infrastructure requires us to use 'file-saver-es'. We recommend that you use the official 'file-saver' package in your applications.
@@ -70,8 +70,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/PivotGrid/ExcelJSOverview/Angular/index.html b/apps/demos/Demos/PivotGrid/ExcelJSOverview/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/PivotGrid/ExcelJSOverview/Angular/index.html
+++ b/apps/demos/Demos/PivotGrid/ExcelJSOverview/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/PivotGrid/ExcelJsHeaderAndFooter/Angular/app/app.component.ts b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Angular/app/app.component.ts
index edfef6a9e37e..edecb09da9a1 100644
--- a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Angular/app/app.component.ts
+++ b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/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 { Workbook, WorksheetViewFrozen } from 'devextreme-exceljs-fork';
 import { saveAs } from 'file-saver-es';
@@ -117,8 +117,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Angular/index.html b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Angular/index.html
+++ b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/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/PivotGrid/FieldPanel/Angular/app/app.component.ts b/apps/demos/Demos/PivotGrid/FieldPanel/Angular/app/app.component.ts
index 423b870ca1a0..c4d12151640c 100644
--- a/apps/demos/Demos/PivotGrid/FieldPanel/Angular/app/app.component.ts
+++ b/apps/demos/Demos/PivotGrid/FieldPanel/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 PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
 import { DxPivotGridModule, DxPivotGridTypes } from 'devextreme-angular/ui/pivot-grid';
@@ -113,8 +113,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/PivotGrid/FieldPanel/Angular/index.html b/apps/demos/Demos/PivotGrid/FieldPanel/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/PivotGrid/FieldPanel/Angular/index.html
+++ b/apps/demos/Demos/PivotGrid/FieldPanel/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/PivotGrid/Filtering/Angular/app/app.component.ts b/apps/demos/Demos/PivotGrid/Filtering/Angular/app/app.component.ts
index 05319e02f3f0..fd785e023f4c 100644
--- a/apps/demos/Demos/PivotGrid/Filtering/Angular/app/app.component.ts
+++ b/apps/demos/Demos/PivotGrid/Filtering/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 { DxPivotGridModule, DxCheckBoxModule } from 'devextreme-angular';
 
 import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
@@ -53,8 +53,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/PivotGrid/Filtering/Angular/index.html b/apps/demos/Demos/PivotGrid/Filtering/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/PivotGrid/Filtering/Angular/index.html
+++ b/apps/demos/Demos/PivotGrid/Filtering/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/PivotGrid/IntegratedFieldChooser/Angular/app/app.component.ts b/apps/demos/Demos/PivotGrid/IntegratedFieldChooser/Angular/app/app.component.ts
index eedc584892ea..6c7aa1c7bbd2 100644
--- a/apps/demos/Demos/PivotGrid/IntegratedFieldChooser/Angular/app/app.component.ts
+++ b/apps/demos/Demos/PivotGrid/IntegratedFieldChooser/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 { DxSelectBoxModule } from 'devextreme-angular';
 import { Options as DataSourceConfig } from 'devextreme/ui/pivot_grid/data_source';
@@ -47,8 +47,4 @@ export class AppComponent {
   applyChangesMode = this.applyChangesModes[0];
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/PivotGrid/IntegratedFieldChooser/Angular/index.html b/apps/demos/Demos/PivotGrid/IntegratedFieldChooser/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/PivotGrid/IntegratedFieldChooser/Angular/index.html
+++ b/apps/demos/Demos/PivotGrid/IntegratedFieldChooser/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/PivotGrid/OLAPDataSource/Angular/app/app.component.ts b/apps/demos/Demos/PivotGrid/OLAPDataSource/Angular/app/app.component.ts
index 234a27fbc594..40943ee7d351 100644
--- a/apps/demos/Demos/PivotGrid/OLAPDataSource/Angular/app/app.component.ts
+++ b/apps/demos/Demos/PivotGrid/OLAPDataSource/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import {
-  Component, enableProdMode, provideZoneChangeDetection,
+  Component, enableProdMode,
 } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { DxPivotGridModule } from 'devextreme-angular';
@@ -47,8 +47,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/PivotGrid/OLAPDataSource/Angular/index.html b/apps/demos/Demos/PivotGrid/OLAPDataSource/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/PivotGrid/OLAPDataSource/Angular/index.html
+++ b/apps/demos/Demos/PivotGrid/OLAPDataSource/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/PivotGrid/Overview/Angular/app/app.component.ts b/apps/demos/Demos/PivotGrid/Overview/Angular/app/app.component.ts
index 76e601522c4f..a7eafc6c5587 100644
--- a/apps/demos/Demos/PivotGrid/Overview/Angular/app/app.component.ts
+++ b/apps/demos/Demos/PivotGrid/Overview/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, ViewChild, AfterViewInit, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, ViewChild, AfterViewInit, enableProdMode } from '@angular/core';
 import {
   DxPivotGridModule,
   DxPivotGridComponent,
@@ -85,8 +85,4 @@ export class AppComponent implements AfterViewInit {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/PivotGrid/Overview/Angular/index.html b/apps/demos/Demos/PivotGrid/Overview/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/PivotGrid/Overview/Angular/index.html
+++ b/apps/demos/Demos/PivotGrid/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/PivotGrid/RemoteVirtualScrolling/Angular/app/app.component.ts b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/Angular/app/app.component.ts
index 102ea7b821ac..3155bb62e29f 100644
--- a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/Angular/app/app.component.ts
+++ b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/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 { DxPivotGridModule } from 'devextreme-angular';
 import { Options as DataSourceConfig } from 'devextreme/ui/pivot_grid/data_source';
 
@@ -33,8 +33,4 @@ export class AppComponent {
   };
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/Angular/index.html b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/Angular/index.html
+++ b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/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/PivotGrid/RunningTotals/Angular/app/app.component.ts b/apps/demos/Demos/PivotGrid/RunningTotals/Angular/app/app.component.ts
index 6897e25c9eff..dadc43ac8d91 100644
--- a/apps/demos/Demos/PivotGrid/RunningTotals/Angular/app/app.component.ts
+++ b/apps/demos/Demos/PivotGrid/RunningTotals/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 { DxPivotGridModule } from 'devextreme-angular';
 import { Options as DataSourceConfig } from 'devextreme/ui/pivot_grid/data_source';
 import { Service } from './app.service';
@@ -70,8 +70,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/PivotGrid/RunningTotals/Angular/index.html b/apps/demos/Demos/PivotGrid/RunningTotals/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/PivotGrid/RunningTotals/Angular/index.html
+++ b/apps/demos/Demos/PivotGrid/RunningTotals/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/PivotGrid/SimpleArray/Angular/app/app.component.ts b/apps/demos/Demos/PivotGrid/SimpleArray/Angular/app/app.component.ts
index d785975cd622..a36c17d51983 100644
--- a/apps/demos/Demos/PivotGrid/SimpleArray/Angular/app/app.component.ts
+++ b/apps/demos/Demos/PivotGrid/SimpleArray/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 { DxPivotGridModule } from 'devextreme-angular';
 import { Options as DataSourceConfig } from 'devextreme/ui/pivot_grid/data_source';
 import { Service } from './app.service';
@@ -54,8 +54,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/PivotGrid/SimpleArray/Angular/index.html b/apps/demos/Demos/PivotGrid/SimpleArray/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/PivotGrid/SimpleArray/Angular/index.html
+++ b/apps/demos/Demos/PivotGrid/SimpleArray/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/PivotGrid/StandaloneFieldChooser/Angular/app/app.component.ts b/apps/demos/Demos/PivotGrid/StandaloneFieldChooser/Angular/app/app.component.ts
index 1079a7780bf7..6468a8312561 100644
--- a/apps/demos/Demos/PivotGrid/StandaloneFieldChooser/Angular/app/app.component.ts
+++ b/apps/demos/Demos/PivotGrid/StandaloneFieldChooser/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 {
   DxRadioGroupComponent,
   DxButtonComponent,
@@ -104,8 +104,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/PivotGrid/StandaloneFieldChooser/Angular/index.html b/apps/demos/Demos/PivotGrid/StandaloneFieldChooser/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/PivotGrid/StandaloneFieldChooser/Angular/index.html
+++ b/apps/demos/Demos/PivotGrid/StandaloneFieldChooser/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/PivotGrid/StatePersistence/Angular/app/app.component.ts b/apps/demos/Demos/PivotGrid/StatePersistence/Angular/app/app.component.ts
index 0dd108c91792..2de97324c913 100644
--- a/apps/demos/Demos/PivotGrid/StatePersistence/Angular/app/app.component.ts
+++ b/apps/demos/Demos/PivotGrid/StatePersistence/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 PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
 import { DxButtonModule } from 'devextreme-angular';
 import { DxPivotGridModule, DxPivotGridTypes } from 'devextreme-angular/ui/pivot-grid';
@@ -101,8 +101,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/PivotGrid/StatePersistence/Angular/index.html b/apps/demos/Demos/PivotGrid/StatePersistence/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/PivotGrid/StatePersistence/Angular/index.html
+++ b/apps/demos/Demos/PivotGrid/StatePersistence/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/PivotGrid/SummaryDisplayModes/Angular/app/app.component.ts b/apps/demos/Demos/PivotGrid/SummaryDisplayModes/Angular/app/app.component.ts
index 7219ad8cd6dc..1e22dbb25a5d 100644
--- a/apps/demos/Demos/PivotGrid/SummaryDisplayModes/Angular/app/app.component.ts
+++ b/apps/demos/Demos/PivotGrid/SummaryDisplayModes/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 { DxPivotGridModule } from 'devextreme-angular';
 import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
 import { DxPivotGridTypes } from 'devextreme-angular/ui/pivot-grid';
@@ -91,8 +91,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/PivotGrid/SummaryDisplayModes/Angular/index.html b/apps/demos/Demos/PivotGrid/SummaryDisplayModes/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/PivotGrid/SummaryDisplayModes/Angular/index.html
+++ b/apps/demos/Demos/PivotGrid/SummaryDisplayModes/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/PivotGrid/VirtualScrolling/Angular/app/app.component.ts b/apps/demos/Demos/PivotGrid/VirtualScrolling/Angular/app/app.component.ts
index 44a424698243..092b9e361d2b 100644
--- a/apps/demos/Demos/PivotGrid/VirtualScrolling/Angular/app/app.component.ts
+++ b/apps/demos/Demos/PivotGrid/VirtualScrolling/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 { DxPivotGridModule } from 'devextreme-angular';
 import { Options as DataSourceConfig } from 'devextreme/ui/pivot_grid/data_source';
 import { Service } from './app.service';
@@ -57,8 +57,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/PivotGrid/VirtualScrolling/Angular/index.html b/apps/demos/Demos/PivotGrid/VirtualScrolling/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/PivotGrid/VirtualScrolling/Angular/index.html
+++ b/apps/demos/Demos/PivotGrid/VirtualScrolling/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/PivotGrid/WebAPIService/Angular/app/app.component.ts b/apps/demos/Demos/PivotGrid/WebAPIService/Angular/app/app.component.ts
index ab585a0840f1..a18752a77bf9 100644
--- a/apps/demos/Demos/PivotGrid/WebAPIService/Angular/app/app.component.ts
+++ b/apps/demos/Demos/PivotGrid/WebAPIService/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 { Options as DataSourceConfig } from 'devextreme/ui/pivot_grid/data_source';
 import { DxPivotGridModule } from 'devextreme-angular';
 import * as AspNetData from 'devextreme-aspnet-data-nojquery';
@@ -77,8 +77,4 @@ export class AppComponent {
   };
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/PivotGrid/WebAPIService/Angular/index.html b/apps/demos/Demos/PivotGrid/WebAPIService/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/PivotGrid/WebAPIService/Angular/index.html
+++ b/apps/demos/Demos/PivotGrid/WebAPIService/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/TreeList/AIColumns/Angular/app/app.component.ts b/apps/demos/Demos/TreeList/AIColumns/Angular/app/app.component.ts
index 1cc91b4a9c1f..48fb8035a31b 100644
--- a/apps/demos/Demos/TreeList/AIColumns/Angular/app/app.component.ts
+++ b/apps/demos/Demos/TreeList/AIColumns/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 { DxTreeListModule } from 'devextreme-angular';
 import type { AIIntegration } from 'devextreme-angular/common/ai-integration';
 import { Service, type IEmployee } from './app.service';
@@ -42,8 +42,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/TreeList/AIColumns/Angular/index.html b/apps/demos/Demos/TreeList/AIColumns/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/TreeList/AIColumns/Angular/index.html
+++ b/apps/demos/Demos/TreeList/AIColumns/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/TreeList/Adaptability/Angular/app/app.component.ts b/apps/demos/Demos/TreeList/Adaptability/Angular/app/app.component.ts
index c27b2ca914e1..4456ae0ecea1 100644
--- a/apps/demos/Demos/TreeList/Adaptability/Angular/app/app.component.ts
+++ b/apps/demos/Demos/TreeList/Adaptability/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 { DxTreeListModule } from 'devextreme-angular';
 import { Employee, 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/TreeList/Adaptability/Angular/index.html b/apps/demos/Demos/TreeList/Adaptability/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/TreeList/Adaptability/Angular/index.html
+++ b/apps/demos/Demos/TreeList/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/TreeList/BatchEditing/Angular/app/app.component.ts b/apps/demos/Demos/TreeList/BatchEditing/Angular/app/app.component.ts
index f0f12c608ca0..3fa53474cffc 100644
--- a/apps/demos/Demos/TreeList/BatchEditing/Angular/app/app.component.ts
+++ b/apps/demos/Demos/TreeList/BatchEditing/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 { DxTreeListModule, DxTreeListTypes } from 'devextreme-angular/ui/tree-list';
 import { Task, Employee, Service } from './app.service';
 
@@ -42,8 +42,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/TreeList/BatchEditing/Angular/index.html b/apps/demos/Demos/TreeList/BatchEditing/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/TreeList/BatchEditing/Angular/index.html
+++ b/apps/demos/Demos/TreeList/BatchEditing/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/TreeList/CellEditing/Angular/app/app.component.ts b/apps/demos/Demos/TreeList/CellEditing/Angular/app/app.component.ts
index f0f12c608ca0..3fa53474cffc 100644
--- a/apps/demos/Demos/TreeList/CellEditing/Angular/app/app.component.ts
+++ b/apps/demos/Demos/TreeList/CellEditing/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 { DxTreeListModule, DxTreeListTypes } from 'devextreme-angular/ui/tree-list';
 import { Task, Employee, Service } from './app.service';
 
@@ -42,8 +42,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/TreeList/CellEditing/Angular/index.html b/apps/demos/Demos/TreeList/CellEditing/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/TreeList/CellEditing/Angular/index.html
+++ b/apps/demos/Demos/TreeList/CellEditing/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/TreeList/ColumnChooser/Angular/app/app.component.ts b/apps/demos/Demos/TreeList/ColumnChooser/Angular/app/app.component.ts
index 190a05e45d89..da06034f61a6 100644
--- a/apps/demos/Demos/TreeList/ColumnChooser/Angular/app/app.component.ts
+++ b/apps/demos/Demos/TreeList/ColumnChooser/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 { DxTextBoxTypes } from 'devextreme-angular/ui/text-box';
 import { DxTreeListModule, DxTreeListTypes } from 'devextreme-angular/ui/tree-list';
@@ -47,8 +47,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/TreeList/ColumnChooser/Angular/index.html b/apps/demos/Demos/TreeList/ColumnChooser/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/TreeList/ColumnChooser/Angular/index.html
+++ b/apps/demos/Demos/TreeList/ColumnChooser/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/TreeList/ColumnHeaderFilter/Angular/app/app.component.ts b/apps/demos/Demos/TreeList/ColumnHeaderFilter/Angular/app/app.component.ts
index f29179a69151..cccdb6b2928d 100644
--- a/apps/demos/Demos/TreeList/ColumnHeaderFilter/Angular/app/app.component.ts
+++ b/apps/demos/Demos/TreeList/ColumnHeaderFilter/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 { DxTreeListModule } from 'devextreme-angular';
 import { DxTextBoxTypes } from 'devextreme-angular/ui/text-box';
 import { Employee, Service } from './app.service';
@@ -29,8 +29,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/TreeList/ColumnHeaderFilter/Angular/index.html b/apps/demos/Demos/TreeList/ColumnHeaderFilter/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/TreeList/ColumnHeaderFilter/Angular/index.html
+++ b/apps/demos/Demos/TreeList/ColumnHeaderFilter/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/TreeList/CustomizeKeyboardNavigation/Angular/app/app.component.ts b/apps/demos/Demos/TreeList/CustomizeKeyboardNavigation/Angular/app/app.component.ts
index ec0864f774e9..464309109617 100644
--- a/apps/demos/Demos/TreeList/CustomizeKeyboardNavigation/Angular/app/app.component.ts
+++ b/apps/demos/Demos/TreeList/CustomizeKeyboardNavigation/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, DxCheckBoxModule, DxSelectBoxModule } from 'devextreme-angular';
 import { DxTreeListModule, DxTreeListTypes } from 'devextreme-angular/ui/tree-list';
 import { Service, Employee } from './app.service';
@@ -44,8 +44,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/TreeList/CustomizeKeyboardNavigation/Angular/index.html b/apps/demos/Demos/TreeList/CustomizeKeyboardNavigation/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/TreeList/CustomizeKeyboardNavigation/Angular/index.html
+++ b/apps/demos/Demos/TreeList/CustomizeKeyboardNavigation/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/TreeList/FilterModes/Angular/app/app.component.ts b/apps/demos/Demos/TreeList/FilterModes/Angular/app/app.component.ts
index 1ee4befb6c32..ca7e85a0bc89 100644
--- a/apps/demos/Demos/TreeList/FilterModes/Angular/app/app.component.ts
+++ b/apps/demos/Demos/TreeList/FilterModes/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 { DxTreeListModule, DxTreeListTypes } from 'devextreme-angular/ui/tree-list';
 import { Employee, 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/TreeList/FilterModes/Angular/index.html b/apps/demos/Demos/TreeList/FilterModes/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/TreeList/FilterModes/Angular/index.html
+++ b/apps/demos/Demos/TreeList/FilterModes/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/TreeList/FilterPanel/Angular/app/app.component.ts b/apps/demos/Demos/TreeList/FilterPanel/Angular/app/app.component.ts
index a04a442245b7..d5d1f2e59b9e 100644
--- a/apps/demos/Demos/TreeList/FilterPanel/Angular/app/app.component.ts
+++ b/apps/demos/Demos/TreeList/FilterPanel/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 { DataSource } from 'devextreme-angular/common/data';
 import { DxTreeListModule, DxTreeListTypes } from 'devextreme-angular/ui/tree-list';
 import { Service } from './app.service';
@@ -30,8 +30,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/TreeList/FilterPanel/Angular/index.html b/apps/demos/Demos/TreeList/FilterPanel/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/TreeList/FilterPanel/Angular/index.html
+++ b/apps/demos/Demos/TreeList/FilterPanel/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/TreeList/FilterRow/Angular/app/app.component.ts b/apps/demos/Demos/TreeList/FilterRow/Angular/app/app.component.ts
index 4d4fded1e464..15a8504370fb 100644
--- a/apps/demos/Demos/TreeList/FilterRow/Angular/app/app.component.ts
+++ b/apps/demos/Demos/TreeList/FilterRow/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 { DxTreeListModule } from 'devextreme-angular';
 import { Employee, 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/TreeList/FilterRow/Angular/index.html b/apps/demos/Demos/TreeList/FilterRow/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/TreeList/FilterRow/Angular/index.html
+++ b/apps/demos/Demos/TreeList/FilterRow/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/TreeList/FixedAndStickyColumns/Angular/app/app.component.ts b/apps/demos/Demos/TreeList/FixedAndStickyColumns/Angular/app/app.component.ts
index ac6d43f0af4f..bc2cc674b3b6 100644
--- a/apps/demos/Demos/TreeList/FixedAndStickyColumns/Angular/app/app.component.ts
+++ b/apps/demos/Demos/TreeList/FixedAndStickyColumns/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 { DxTreeListModule } from 'devextreme-angular';
 import { Employee, Service } from './app.service';
 
@@ -26,8 +26,4 @@ export class AppComponent {
   calculateCellValue = ({ Title, FirstName, LastName }) => [Title, FirstName, LastName].join(' ');
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/TreeList/FixedAndStickyColumns/Angular/index.html b/apps/demos/Demos/TreeList/FixedAndStickyColumns/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/TreeList/FixedAndStickyColumns/Angular/index.html
+++ b/apps/demos/Demos/TreeList/FixedAndStickyColumns/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/TreeList/FocusedRow/Angular/app/app.component.ts b/apps/demos/Demos/TreeList/FocusedRow/Angular/app/app.component.ts
index 3c8544eac019..78aa8f3bc2cc 100644
--- a/apps/demos/Demos/TreeList/FocusedRow/Angular/app/app.component.ts
+++ b/apps/demos/Demos/TreeList/FocusedRow/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 * as AspNetData from 'devextreme-aspnet-data-nojquery';
 import { DxNumberBoxModule } from 'devextreme-angular';
 import { DxTreeListModule, DxTreeListTypes } from 'devextreme-angular/ui/tree-list';
@@ -68,8 +68,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/TreeList/FocusedRow/Angular/index.html b/apps/demos/Demos/TreeList/FocusedRow/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/TreeList/FocusedRow/Angular/index.html
+++ b/apps/demos/Demos/TreeList/FocusedRow/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/TreeList/FormEditing/Angular/app/app.component.ts b/apps/demos/Demos/TreeList/FormEditing/Angular/app/app.component.ts
index eab573418e21..886be20db3ce 100644
--- a/apps/demos/Demos/TreeList/FormEditing/Angular/app/app.component.ts
+++ b/apps/demos/Demos/TreeList/FormEditing/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 { DxTreeListModule, DxTreeListTypes } from 'devextreme-angular/ui/tree-list';
 import { Employee, Service } from './app.service';
 
@@ -43,8 +43,4 @@ export class AppComponent {
   allowDeleting = ({ row }) => row.data.ID !== 1;
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/TreeList/FormEditing/Angular/index.html b/apps/demos/Demos/TreeList/FormEditing/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/TreeList/FormEditing/Angular/index.html
+++ b/apps/demos/Demos/TreeList/FormEditing/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/TreeList/KeyboardNavigation/Angular/app/app.component.ts b/apps/demos/Demos/TreeList/KeyboardNavigation/Angular/app/app.component.ts
index 89f30e79f264..86e90ad5efd7 100644
--- a/apps/demos/Demos/TreeList/KeyboardNavigation/Angular/app/app.component.ts
+++ b/apps/demos/Demos/TreeList/KeyboardNavigation/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 { DxTreeListModule } from 'devextreme-angular';
 import { Service, Employee } from './app.service';
 
@@ -23,8 +23,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/TreeList/KeyboardNavigation/Angular/index.html b/apps/demos/Demos/TreeList/KeyboardNavigation/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/TreeList/KeyboardNavigation/Angular/index.html
+++ b/apps/demos/Demos/TreeList/KeyboardNavigation/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/TreeList/LoadDataOnDemand/Angular/app/app.component.ts b/apps/demos/Demos/TreeList/LoadDataOnDemand/Angular/app/app.component.ts
index 8652065f6472..3563726e45b1 100644
--- a/apps/demos/Demos/TreeList/LoadDataOnDemand/Angular/app/app.component.ts
+++ b/apps/demos/Demos/TreeList/LoadDataOnDemand/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 { HttpClient, HttpParams, provideHttpClient, withFetch } from '@angular/common/http';
 import { lastValueFrom } from 'rxjs';
 import { DxTreeListModule } from 'devextreme-angular';
@@ -41,7 +41,6 @@ export class AppComponent {
 
 bootstrapApplication(AppComponent, {
   providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
     provideHttpClient(withFetch()),
   ],
 });
diff --git a/apps/demos/Demos/TreeList/LoadDataOnDemand/Angular/index.html b/apps/demos/Demos/TreeList/LoadDataOnDemand/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/TreeList/LoadDataOnDemand/Angular/index.html
+++ b/apps/demos/Demos/TreeList/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/TreeList/LocalReordering/Angular/app/app.component.ts b/apps/demos/Demos/TreeList/LocalReordering/Angular/app/app.component.ts
index 4cc14e066fe0..368ed95a357c 100644
--- a/apps/demos/Demos/TreeList/LocalReordering/Angular/app/app.component.ts
+++ b/apps/demos/Demos/TreeList/LocalReordering/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 { DxCheckBoxModule } from 'devextreme-angular';
 import { DxTreeListModule, type DxTreeListTypes } from 'devextreme-angular/ui/tree-list';
@@ -80,8 +80,4 @@ export class AppComponent {
   };
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/TreeList/LocalReordering/Angular/index.html b/apps/demos/Demos/TreeList/LocalReordering/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/TreeList/LocalReordering/Angular/index.html
+++ b/apps/demos/Demos/TreeList/LocalReordering/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/TreeList/MultipleRowSelection/Angular/app/app.component.ts b/apps/demos/Demos/TreeList/MultipleRowSelection/Angular/app/app.component.ts
index 4ab28536632a..71527236e306 100644
--- a/apps/demos/Demos/TreeList/MultipleRowSelection/Angular/app/app.component.ts
+++ b/apps/demos/Demos/TreeList/MultipleRowSelection/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 { DxTreeListModule, DxTreeListTypes } from 'devextreme-angular/ui/tree-list';
 import { DxSelectBoxModule } from 'devextreme-angular/ui/select-box';
@@ -49,8 +49,4 @@ export class AppComponent {
     : 'Nobody has been selected');
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/TreeList/MultipleRowSelection/Angular/index.html b/apps/demos/Demos/TreeList/MultipleRowSelection/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/TreeList/MultipleRowSelection/Angular/index.html
+++ b/apps/demos/Demos/TreeList/MultipleRowSelection/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/TreeList/MultipleSorting/Angular/app/app.component.ts b/apps/demos/Demos/TreeList/MultipleSorting/Angular/app/app.component.ts
index ee0a62d2e9e1..b97b1ae0742a 100644
--- a/apps/demos/Demos/TreeList/MultipleSorting/Angular/app/app.component.ts
+++ b/apps/demos/Demos/TreeList/MultipleSorting/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 { DxTreeListModule } from 'devextreme-angular';
 import { Task, Employee, Service } from './app.service';
 
@@ -36,8 +36,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/TreeList/MultipleSorting/Angular/index.html b/apps/demos/Demos/TreeList/MultipleSorting/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/TreeList/MultipleSorting/Angular/index.html
+++ b/apps/demos/Demos/TreeList/MultipleSorting/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/TreeList/Overview/Angular/app/app.component.ts b/apps/demos/Demos/TreeList/Overview/Angular/app/app.component.ts
index f26137c71719..914dde610ef7 100644
--- a/apps/demos/Demos/TreeList/Overview/Angular/app/app.component.ts
+++ b/apps/demos/Demos/TreeList/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 { DxTreeListModule } from 'devextreme-angular';
 import {
   Service, Task, Employee, Priority,
@@ -47,8 +47,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/TreeList/Overview/Angular/index.html b/apps/demos/Demos/TreeList/Overview/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/TreeList/Overview/Angular/index.html
+++ b/apps/demos/Demos/TreeList/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/TreeList/Paging/Angular/app/app.component.ts b/apps/demos/Demos/TreeList/Paging/Angular/app/app.component.ts
index bf6e48423d0a..94624510f077 100644
--- a/apps/demos/Demos/TreeList/Paging/Angular/app/app.component.ts
+++ b/apps/demos/Demos/TreeList/Paging/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 { DxTreeListModule } from 'devextreme-angular';
 import { Task, Employee, 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/TreeList/Paging/Angular/index.html b/apps/demos/Demos/TreeList/Paging/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/TreeList/Paging/Angular/index.html
+++ b/apps/demos/Demos/TreeList/Paging/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/TreeList/PopupEditing/Angular/app/app.component.ts b/apps/demos/Demos/TreeList/PopupEditing/Angular/app/app.component.ts
index cc7053c94153..0dbb918e204f 100644
--- a/apps/demos/Demos/TreeList/PopupEditing/Angular/app/app.component.ts
+++ b/apps/demos/Demos/TreeList/PopupEditing/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 { DxTreeListModule, DxTreeListTypes } from 'devextreme-angular/ui/tree-list';
 import { Employee, Service } from './app.service';
 
@@ -46,8 +46,4 @@ export class AppComponent {
   allowDeleting = ({ row }) => row.data.ID !== 1;
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/TreeList/PopupEditing/Angular/index.html b/apps/demos/Demos/TreeList/PopupEditing/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/TreeList/PopupEditing/Angular/index.html
+++ b/apps/demos/Demos/TreeList/PopupEditing/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/TreeList/Reordering/Angular/app/app.component.ts b/apps/demos/Demos/TreeList/Reordering/Angular/app/app.component.ts
index ac6d43f0af4f..bc2cc674b3b6 100644
--- a/apps/demos/Demos/TreeList/Reordering/Angular/app/app.component.ts
+++ b/apps/demos/Demos/TreeList/Reordering/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 { DxTreeListModule } from 'devextreme-angular';
 import { Employee, Service } from './app.service';
 
@@ -26,8 +26,4 @@ export class AppComponent {
   calculateCellValue = ({ Title, FirstName, LastName }) => [Title, FirstName, LastName].join(' ');
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/TreeList/Reordering/Angular/index.html b/apps/demos/Demos/TreeList/Reordering/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/TreeList/Reordering/Angular/index.html
+++ b/apps/demos/Demos/TreeList/Reordering/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/TreeList/Resizing/Angular/app/app.component.ts b/apps/demos/Demos/TreeList/Resizing/Angular/app/app.component.ts
index 6a96e8c88175..32713d8c0ef0 100644
--- a/apps/demos/Demos/TreeList/Resizing/Angular/app/app.component.ts
+++ b/apps/demos/Demos/TreeList/Resizing/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 { DxTreeListModule, DxTreeListTypes } from 'devextreme-angular/ui/tree-list';
 import { DxSelectBoxModule, DxSelectBoxTypes } from 'devextreme-angular/ui/select-box';
 import { Employee, Service } from './app.service';
@@ -34,8 +34,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/TreeList/Resizing/Angular/index.html b/apps/demos/Demos/TreeList/Resizing/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/TreeList/Resizing/Angular/index.html
+++ b/apps/demos/Demos/TreeList/Resizing/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/TreeList/RowEditing/Angular/app/app.component.ts b/apps/demos/Demos/TreeList/RowEditing/Angular/app/app.component.ts
index 17b840d1b570..b13f3da5dc5f 100644
--- a/apps/demos/Demos/TreeList/RowEditing/Angular/app/app.component.ts
+++ b/apps/demos/Demos/TreeList/RowEditing/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 { DxTreeListModule, DxTreeListTypes } from 'devextreme-angular/ui/tree-list';
 import { Employee, Service } from './app.service';
 
@@ -46,8 +46,4 @@ export class AppComponent {
   allowDeleting = ({ row }) => row.data.ID !== 1;
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/TreeList/RowEditing/Angular/index.html b/apps/demos/Demos/TreeList/RowEditing/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/TreeList/RowEditing/Angular/index.html
+++ b/apps/demos/Demos/TreeList/RowEditing/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/TreeList/SearchPanel/Angular/app/app.component.ts b/apps/demos/Demos/TreeList/SearchPanel/Angular/app/app.component.ts
index ee0a62d2e9e1..b97b1ae0742a 100644
--- a/apps/demos/Demos/TreeList/SearchPanel/Angular/app/app.component.ts
+++ b/apps/demos/Demos/TreeList/SearchPanel/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 { DxTreeListModule } from 'devextreme-angular';
 import { Task, Employee, Service } from './app.service';
 
@@ -36,8 +36,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/TreeList/SearchPanel/Angular/index.html b/apps/demos/Demos/TreeList/SearchPanel/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/TreeList/SearchPanel/Angular/index.html
+++ b/apps/demos/Demos/TreeList/SearchPanel/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/TreeList/SimpleArrayHierarchicalStructure/Angular/app/app.component.ts b/apps/demos/Demos/TreeList/SimpleArrayHierarchicalStructure/Angular/app/app.component.ts
index c27b2ca914e1..4456ae0ecea1 100644
--- a/apps/demos/Demos/TreeList/SimpleArrayHierarchicalStructure/Angular/app/app.component.ts
+++ b/apps/demos/Demos/TreeList/SimpleArrayHierarchicalStructure/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 { DxTreeListModule } from 'devextreme-angular';
 import { Employee, 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/TreeList/SimpleArrayHierarchicalStructure/Angular/index.html b/apps/demos/Demos/TreeList/SimpleArrayHierarchicalStructure/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/TreeList/SimpleArrayHierarchicalStructure/Angular/index.html
+++ b/apps/demos/Demos/TreeList/SimpleArrayHierarchicalStructure/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/TreeList/SimpleArrayPlainStructure/Angular/app/app.component.ts b/apps/demos/Demos/TreeList/SimpleArrayPlainStructure/Angular/app/app.component.ts
index c27b2ca914e1..4456ae0ecea1 100644
--- a/apps/demos/Demos/TreeList/SimpleArrayPlainStructure/Angular/app/app.component.ts
+++ b/apps/demos/Demos/TreeList/SimpleArrayPlainStructure/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 { DxTreeListModule } from 'devextreme-angular';
 import { Employee, 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/TreeList/SimpleArrayPlainStructure/Angular/index.html b/apps/demos/Demos/TreeList/SimpleArrayPlainStructure/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/TreeList/SimpleArrayPlainStructure/Angular/index.html
+++ b/apps/demos/Demos/TreeList/SimpleArrayPlainStructure/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/TreeList/SingleRowSelection/Angular/app/app.component.ts b/apps/demos/Demos/TreeList/SingleRowSelection/Angular/app/app.component.ts
index 581d191722b9..8f4fdf9f5365 100644
--- a/apps/demos/Demos/TreeList/SingleRowSelection/Angular/app/app.component.ts
+++ b/apps/demos/Demos/TreeList/SingleRowSelection/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 { DxTreeListModule } from 'devextreme-angular';
 import { Service, Employee } 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/TreeList/SingleRowSelection/Angular/index.html b/apps/demos/Demos/TreeList/SingleRowSelection/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/TreeList/SingleRowSelection/Angular/index.html
+++ b/apps/demos/Demos/TreeList/SingleRowSelection/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/TreeList/StatePersistence/Angular/app/app.component.ts b/apps/demos/Demos/TreeList/StatePersistence/Angular/app/app.component.ts
index 6cad8c6549cc..cc901391aed4 100644
--- a/apps/demos/Demos/TreeList/StatePersistence/Angular/app/app.component.ts
+++ b/apps/demos/Demos/TreeList/StatePersistence/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 { DxTreeListModule, DxTreeListComponent } from 'devextreme-angular';
 import { Employee, Service } from './app.service';
 
@@ -34,8 +34,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/TreeList/StatePersistence/Angular/index.html b/apps/demos/Demos/TreeList/StatePersistence/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/TreeList/StatePersistence/Angular/index.html
+++ b/apps/demos/Demos/TreeList/StatePersistence/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/TreeList/WebAPIService/Angular/app/app.component.ts b/apps/demos/Demos/TreeList/WebAPIService/Angular/app/app.component.ts
index 4644da2bcafe..45f4f04cc9f4 100644
--- a/apps/demos/Demos/TreeList/WebAPIService/Angular/app/app.component.ts
+++ b/apps/demos/Demos/TreeList/WebAPIService/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 * as AspNetData from 'devextreme-aspnet-data-nojquery';
 import { DxTreeListModule, DxTreeListTypes } from 'devextreme-angular/ui/tree-list';
 import 'anti-forgery';
@@ -56,8 +56,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/TreeList/WebAPIService/Angular/index.html b/apps/demos/Demos/TreeList/WebAPIService/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/TreeList/WebAPIService/Angular/index.html
+++ b/apps/demos/Demos/TreeList/WebAPIService/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"]
     },