WIP. Check Agular 22 in demos

apps/demos/Demos/Accordion/Overview/Angular/app/app.component.ts

@@ -1,4 +1,9 @@
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  enableProdMode,
+  provideZoneChangeDetection,
+} from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import {
   DxAccordionModule, DxCheckBoxModule, DxSliderModule, DxTagBoxModule,
@@ -17,6 +22,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.Eager,
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],

apps/demos/Demos/Charts/ClientSideDataProcessing/Angular/app/app.component.ts

@@ -1,5 +1,10 @@
 import {
-  Component, AfterViewInit, enableProdMode, provideZoneChangeDetection, inject,
+  ChangeDetectionStrategy,
+  Component,
+  AfterViewInit,
+  enableProdMode,
+  provideZoneChangeDetection,
+  inject,
 } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 
@@ -20,6 +25,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.Eager,
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],

apps/demos/Demos/Charts/TilingAlgorithms/Angular/app/app.component.ts

@@ -1,5 +1,5 @@
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
-import { bootstrapApplication, BrowserModule } from '@angular/platform-browser';
+import { ChangeDetectionStrategy, Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { bootstrapApplication } from '@angular/platform-browser';
 import { DxTreeMapModule, DxSelectBoxModule } from 'devextreme-angular';
 import { PopulationByAge, Service } from './app.service';
 
@@ -14,13 +14,13 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.Eager,
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],
   providers: [Service],
   preserveWhitespaces: true,
   imports: [
-    BrowserModule,
     DxTreeMapModule,
     DxSelectBoxModule,
   ],

apps/demos/Demos/DataGrid/DeferredSelection/Angular/app/app.component.ts

@@ -1,5 +1,10 @@
 import {
-  Component, ViewChild, AfterViewInit, enableProdMode, provideZoneChangeDetection,
+  Component,
+  ViewChild,
+  AfterViewInit,
+  enableProdMode,
+  provideZoneChangeDetection,
+  ChangeDetectionStrategy,
 } from '@angular/core';
 import { DxDataGridModule, DxDataGridComponent, DxButtonModule } from 'devextreme-angular';
 import { query } from 'devextreme-angular/common/data';
@@ -17,6 +22,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.Eager,
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],

apps/demos/Demos/DataGrid/NewRecordPosition/Angular/app/app.component.ts

@@ -1,5 +1,5 @@
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
-import { bootstrapApplication, BrowserModule } from '@angular/platform-browser';
+import { ChangeDetectionStrategy, Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { bootstrapApplication } from '@angular/platform-browser';
 import Guid from 'devextreme/core/guid';
 import { CustomStore } from 'devextreme-angular/common/data';
 import { DxSelectBoxModule } from 'devextreme-angular';
@@ -19,12 +19,12 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.Eager,
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],
   providers: [Service],
   imports: [
-    BrowserModule,
     DxDataGridModule,
     DxSelectBoxModule,
   ],

apps/demos/Demos/DataGrid/RemoteCRUDOperations/Angular/app/app.component.ts

@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { ChangeDetectionStrategy, Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
 import { HttpClient, HttpParams, provideHttpClient, withFetch } from '@angular/common/http';
 import { lastValueFrom, Observable } from 'rxjs';
 import { DxDataGridModule, DxSelectBoxModule, DxButtonModule } from 'devextreme-angular';
@@ -20,6 +20,7 @@ if (window && window.config?.packageConfigPaths) {
 
 @Component({
   selector: 'demo-app',
+  changeDetection: ChangeDetectionStrategy.Eager,
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],
   preserveWhitespaces: true,

apps/demos/Demos/DataGrid/RowSelection/Angular/app/app.component.ts

@@ -1,4 +1,9 @@
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  enableProdMode,
+  provideZoneChangeDetection,
+} from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { DxDataGridModule } from 'devextreme-angular';
 import { Service, Employee } from './app.service';
@@ -14,6 +19,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.Eager,
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],

apps/demos/Demos/Diagram/ItemSelection/Angular/app/app.component.ts

@@ -1,5 +1,10 @@
 import {
-  Component, Pipe, PipeTransform, enableProdMode, provideZoneChangeDetection,
+  ChangeDetectionStrategy,
+  Component,
+  Pipe,
+  PipeTransform,
+  enableProdMode,
+  provideZoneChangeDetection,
 } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { ArrayStore } from 'devextreme-angular/common/data';
@@ -26,6 +31,7 @@ export class StringifyItemsPipe implements PipeTransform {
 }
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.Eager,
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],

apps/demos/Demos/FilterBuilder/Customization/Angular/app/app.component.ts

@@ -1,5 +1,5 @@
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
-import { bootstrapApplication, BrowserModule } from '@angular/platform-browser';
+import { ChangeDetectionStrategy, Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { bootstrapApplication } from '@angular/platform-browser';
 import { DxListModule, DxButtonModule, DxTagBoxModule } from 'devextreme-angular';
 import { DxFilterBuilderModule, DxFilterBuilderComponent, DxFilterBuilderTypes } from 'devextreme-angular/ui/filter-builder';
 import { Service } from './app.service';
@@ -31,10 +31,10 @@ if (window && window.config?.packageConfigPaths) {
 @Component({
   selector: 'demo-app',
   providers: [Service],
+  changeDetection: ChangeDetectionStrategy.Eager,
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],
   imports: [
-    BrowserModule,
     DxListModule,
     DxButtonModule,
     DxTagBoxModule,

apps/demos/Demos/List/DragAndDrop/Angular/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { ChangeDetectionStrategy, Component, enableProdMode, provideZoneChangeDetection} from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { DxListModule } from 'devextreme-angular';
 import type { DxSortableTypes } from 'devextreme-angular/ui/sortable';
@@ -21,6 +21,7 @@ if (window && window.config?.packageConfigPaths) {
   providers: [Service],
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],
+  changeDetection: ChangeDetectionStrategy.Eager,
   preserveWhitespaces: true,
   imports: [DxListModule],
 })

apps/demos/Demos/List/Selection/Angular/app/app.component.ts

@@ -1,5 +1,5 @@
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
-import { bootstrapApplication, BrowserModule } from '@angular/platform-browser';
+import { ChangeDetectionStrategy, Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { bootstrapApplication } from '@angular/platform-browser';
 import { DataSource, ArrayStore } from 'devextreme-angular/common/data';
 import { DxSelectBoxModule, DxCheckBoxModule } from 'devextreme-angular';
 import type { SingleMultipleAllOrNone } from 'devextreme-angular/common';
@@ -23,8 +23,8 @@ if (window && window.config?.packageConfigPaths) {
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],
   preserveWhitespaces: true,
+  changeDetection: ChangeDetectionStrategy.Eager,
   imports: [
-    BrowserModule,
     DxSelectBoxModule,
     DxListModule,
     DxCheckBoxModule,

apps/demos/Demos/MultiView/Overview/Angular/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { ChangeDetectionStrategy, Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 
 import { DxMultiViewModule, DxCheckBoxModule } from 'devextreme-angular';
@@ -21,6 +21,7 @@ if (window && window.config?.packageConfigPaths) {
   styleUrls: [`.${modulePrefix}/app.component.css`],
   providers: [Service],
   preserveWhitespaces: true,
+  changeDetection: ChangeDetectionStrategy.Eager,
   imports: [
     DxMultiViewModule,
     DxCheckBoxModule,

apps/demos/Demos/Popup/Scrolling/Angular/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import {ChangeDetectionStrategy, Component, enableProdMode, provideZoneChangeDetection} from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { DxPopupModule, DxScrollViewModule } from 'devextreme-angular';
 import { DxButtonModule, DxButtonTypes } from 'devextreme-angular/ui/button';
@@ -14,6 +14,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.Eager,
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],

apps/demos/Demos/Scheduler/DragAndDrop/Angular/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { ChangeDetectionStrategy, Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { DxSchedulerModule, DxDraggableModule, DxScrollViewModule } from 'devextreme-angular';
 import { DxSchedulerTypes } from 'devextreme-angular/ui/scheduler';
@@ -16,6 +16,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.Eager,
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],

apps/demos/Demos/SelectBox/SearchAndEditing/Angular/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import {ChangeDetectionStrategy, Component, enableProdMode, provideZoneChangeDetection} from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { DxNumberBoxModule, DxCheckBoxModule, DxSelectBoxModule } from 'devextreme-angular';
 import { DataSource } from 'devextreme-angular/common/data';
@@ -16,6 +16,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.Eager,
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],

apps/demos/Demos/Stepper/FormIntegration/Angular/app/app.component.ts

@@ -1,5 +1,10 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  enableProdMode,
+  provideZoneChangeDetection,
+} from '@angular/core';
 import {
   DxButtonModule,
   DxMultiViewModule,
@@ -25,6 +30,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.Eager,
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],

apps/demos/Demos/Stepper/FormIntegration/Angular/app/confirmation/confirmation.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import type { BookingFormData } from '../app.types';
 
 let modulePrefix = '';
@@ -8,6 +8,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.Eager,
   selector: 'confirmation',
   templateUrl: `.${modulePrefix}/confirmation/confirmation.component.html`,
   styleUrls: [`.${modulePrefix}/confirmation/confirmation.component.css`],

apps/demos/Demos/Tabs/Selection/Angular/app/app.component.ts

@@ -1,4 +1,9 @@
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  enableProdMode,
+  provideZoneChangeDetection,
+} from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { DxTabsModule, DxSelectBoxModule, DxMultiViewModule } from 'devextreme-angular';
 import { Tab, Service } from './app.service';
@@ -14,6 +19,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.Eager,
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],

apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Angular/app/app.component.ts

@@ -1,7 +1,7 @@
 import {
-  Component, Pipe, PipeTransform, enableProdMode, ViewChild, provideZoneChangeDetection,
+  Component, Pipe, PipeTransform, enableProdMode, ViewChild, provideZoneChangeDetection, ChangeDetectionStrategy,
 } from '@angular/core';
-import { bootstrapApplication, BrowserModule } from '@angular/platform-browser';
+import { bootstrapApplication } from '@angular/platform-browser';
 import { DxListModule, DxCheckBoxModule } from 'devextreme-angular';
 import { DxTreeViewModule, DxTreeViewComponent, DxTreeViewTypes } from 'devextreme-angular/ui/tree-view';
 import { DxSelectBoxModule, DxSelectBoxTypes } from 'devextreme-angular/ui/select-box';
@@ -29,9 +29,9 @@ if (window && window.config?.packageConfigPaths) {
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],
   providers: [Service],
+  changeDetection: ChangeDetectionStrategy.Eager,
   preserveWhitespaces: true,
   imports: [
-    BrowserModule,
     DxTreeViewModule,
     DxListModule,
     DxCheckBoxModule,

apps/demos/configs/Angular/tsconfig.json

@@ -3,7 +3,7 @@
     "target": "ES2022",
     "experimentalDecorators": true,
     "esModuleInterop": true,
-    "moduleResolution": "node",
+    "moduleResolution": "node16",
     "skipLibCheck": true,
     "baseUrl": "./",
     "paths": {

apps/demos/eslint.config.mjs

@@ -14,7 +14,6 @@ import jest from 'eslint-plugin-jest';
 import vuePlugin from 'eslint-plugin-vue';
 import vueParser from 'vue-eslint-parser';
 import tsParser from '@typescript-eslint/parser';
-import tsPlugin from '@typescript-eslint/eslint-plugin';
 import js from '@eslint/js';
 import { fixupPluginRules } from '@eslint/compat';
 import { FlatCompat } from '@eslint/eslintrc';
@@ -60,7 +59,6 @@ export default [
       'no-only-tests': noOnlyTests,
       '@stylistic': stylistic,
       jest,
-      '@typescript-eslint': tsPlugin,
       'deprecation': fixupPluginRules(deprecation),
     },
     languageOptions: {