From b4cb5e0efd918d9646ce0d580b802d9d7798ddab Mon Sep 17 00:00:00 2001
From: Aliullov Vlad <91639107+GoodDayForSurf@users.noreply.github.com>
Date: Tue, 6 Feb 2024 17:47:47 +0400
Subject: [PATCH] Refactor types in Angular Demos p.2 (#3075)

* refactor types in Angular Demos p.2
Co-authored-by: volvl <dxvladislavvolkov@users.noreply.github.com>
---
 .../Angular/app/app.component.html            |   2 +-
 .../Angular/app/app.component.ts              |  23 +++-
 .../Angular/app/app.component.ts              |  56 ++++----
 .../FilterBuilder/Customization/React/data.ts |   4 +-
 .../WithDataGrid/Angular/app/app.component.ts |   9 +-
 .../WithDataGrid/Angular/app/app.service.ts   |  11 +-
 .../WithList/Angular/app/app.component.ts     |   8 +-
 .../WithList/Angular/app/app.service.ts       |   7 +-
 .../FilterBuilder/WithList/React/data.ts      |   2 +-
 .../Overview/Angular/app/app.component.ts     |  18 +--
 .../Overview/Angular/app/app.service.ts       |   2 +-
 .../Angular/app/app.component.ts              |  23 ++--
 .../Overview/Angular/app/app.component.ts     |  29 ++--
 .../Angular/app/app.component.ts              |  65 ++++-----
 .../Validation/Angular/app/app.component.ts   |  92 ++++++-------
 .../Overview/Angular/app/app.component.ts     |   6 +-
 .../Angular/app/app.component.ts              |  36 ++---
 .../ContextMenu/Angular/app/app.component.ts  |  20 ++-
 .../Angular/app/app.component.html            |   1 +
 .../ExportToPDF/Angular/app/app.component.ts  | 104 ++++++++-------
 .../Sorting/Angular/app/app.component.html    |   2 +-
 .../Sorting/Angular/app/app.component.ts      |  14 +-
 .../Toolbar/Angular/app/app.component.ts      |  24 ++--
 .../Angular/app/app.component.ts              |   9 +-
 .../Angular/app/app.component.ts              |   4 +-
 .../Angular/app/app.component.ts              |   6 +-
 .../Angular/app/app.component.ts              |   6 +-
 .../GaugeTooltip/Angular/app/app.component.ts |   8 +-
 .../Angular/app/app.component.ts              |   6 +-
 .../Angular/app/app.component.ts              |   6 +-
 .../Angular/app/app.service.ts                |   2 +-
 .../Angular/app/app.component.ts              |  11 +-
 .../Angular/app/app.component.ts              |  21 ++-
 .../Angular/app/app.component.ts              |  16 +--
 .../Angular/app/app.component.ts              |  13 +-
 .../ItemDragging/Angular/app/app.component.ts |  28 ++--
 .../Angular/app/app.component.ts              |   6 +-
 .../Angular/app/app.component.ts              |  11 +-
 .../List/WebAPI/Angular/app/app.component.ts  |  26 ++--
 .../Overview/Angular/app/app.component.ts     |   2 +-
 .../Basics/Angular/app/app.component.ts       |   2 +-
 .../Angular/app/app.component.ts              |  24 ++--
 .../Map/Markers/Angular/app/app.service.ts    |   2 +-
 .../Map/Routes/Angular/app/app.component.ts   |  17 +--
 .../Map/Routes/Angular/app/app.service.ts     |   2 +-
 .../Overview/Angular/app/app.component.ts     |  27 ++--
 .../Overview/Angular/app/app.component.ts     |   4 +-
 .../Angular/app/app.component.html            |   1 -
 .../Angular/app/app.component.ts              |   6 +-
 .../DrillDown/Angular/app/app.component.ts    |   9 +-
 .../Angular/app/app.component.ts              |  38 +++---
 .../Angular/app/app.component.ts              |   7 +-
 .../Angular/app/app.component.ts              |   9 +-
 .../FieldPanel/Angular/app/app.component.ts   |  14 +-
 .../HeaderFilter/Angular/app/app.component.ts |   2 +-
 .../Angular/app/app.component.ts              |  63 ++++-----
 .../Angular/app/app.component.ts              |   6 +-
 .../Angular/app/app.component.ts              |   5 +-
 .../Overview/Angular/app/app.component.ts     |   4 +-
 .../Angular/app/app.component.ts              |  35 +++--
 .../Angular/app/app.component.ts              |   8 +-
 .../SimpleArray/Angular/app/app.component.ts  |   3 +-
 .../Angular/app/app.component.ts              |  17 +--
 .../Angular/app/app.component.ts              |  14 +-
 .../Angular/app/app.component.ts              |  14 +-
 .../Angular/app/app.component.ts              |   4 +-
 .../Angular/app/app.component.ts              | 126 +++++++++---------
 .../Overview/Angular/app/app.component.ts     |  10 +-
 .../Scrolling/Angular/app/app.component.ts    |  30 ++---
 .../Overview/Angular/app/app.component.ts     |  21 ++-
 .../Angular/app/app.component.ts              |  24 ++--
 .../Angular/app/app.component.ts              |  46 +++----
 .../Angular/app/app.component.ts              |   5 +-
 .../Angular/app/app.component.ts              |  11 +-
 .../Angular/app/app.component.ts              |  17 +--
 .../Angular/app/app.component.ts              |  24 ++--
 .../Overview/Angular/app/app.component.ts     |   4 +-
 77 files changed, 649 insertions(+), 745 deletions(-)

diff --git a/JSDemos/Demos/FileUploader/FileUploading/Angular/app/app.component.html b/JSDemos/Demos/FileUploader/FileUploading/Angular/app/app.component.html
index 3b8ff335e78..67f29105f7b 100644
--- a/JSDemos/Demos/FileUploader/FileUploading/Angular/app/app.component.html
+++ b/JSDemos/Demos/FileUploader/FileUploading/Angular/app/app.component.html
@@ -21,7 +21,7 @@ <h4>Selected Files</h4>
         Type: <span>{{ file.type }}</span
         ><br />
         Last Modified Date:
-        <span>{{ file.lastModifiedDate }}</span>
+        <span>{{ file.lastModified | demodate }}</span>
       </div>
     </div>
   </div>
diff --git a/JSDemos/Demos/FileUploader/FileUploading/Angular/app/app.component.ts b/JSDemos/Demos/FileUploader/FileUploading/Angular/app/app.component.ts
index 25fd1891716..e3b49208dd6 100644
--- a/JSDemos/Demos/FileUploader/FileUploading/Angular/app/app.component.ts
+++ b/JSDemos/Demos/FileUploader/FileUploading/Angular/app/app.component.ts
@@ -1,8 +1,23 @@
-import { NgModule, Component, enableProdMode } from '@angular/core';
+import {
+  NgModule, Component, enableProdMode, Pipe, PipeTransform,
+} from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { DxCheckBoxModule, DxFileUploaderModule, DxSelectBoxModule } from 'devextreme-angular';
+import {
+  DxCheckBoxModule, DxFileUploaderModule, DxSelectBoxModule,
+} from 'devextreme-angular';
+
+if (!/localhost/.test(document.location.host)) {
+  enableProdMode();
+}
+
+@Pipe({ name: 'demodate' })
+export class DemoDatePipe<TArgs, TReturn> implements PipeTransform {
+  transform(date: number) {
+    return new Date(date);
+  }
+}
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
@@ -14,7 +29,7 @@ if (!/localhost/.test(document.location.host)) {
   styleUrls: ['app/app.component.css'],
 })
 export class AppComponent {
-  value: any[] = [];
+  value: File[] = [];
 }
 
 @NgModule({
@@ -25,7 +40,7 @@ export class AppComponent {
     DxFileUploaderModule,
     DxSelectBoxModule,
   ],
-  declarations: [AppComponent],
+  declarations: [AppComponent, DemoDatePipe],
   bootstrap: [AppComponent],
 })
 export class AppModule { }
diff --git a/JSDemos/Demos/FilterBuilder/Customization/Angular/app/app.component.ts b/JSDemos/Demos/FilterBuilder/Customization/Angular/app/app.component.ts
index bea20443742..320be62090a 100644
--- a/JSDemos/Demos/FilterBuilder/Customization/Angular/app/app.component.ts
+++ b/JSDemos/Demos/FilterBuilder/Customization/Angular/app/app.component.ts
@@ -1,16 +1,12 @@
-import {
-  NgModule, Component, ViewChild, enableProdMode,
-} from '@angular/core';
+import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import {
-  DxListModule,
-  DxButtonModule,
-  DxTagBoxModule,
-  DxFilterBuilderModule,
-} from 'devextreme-angular';
+import { DxListModule, DxButtonModule, DxTagBoxModule } from 'devextreme-angular';
+import { DxFilterBuilderModule, DxFilterBuilderComponent, DxFilterBuilderTypes } from 'devextreme-angular/ui/filter-builder';
 import { Service } from './app.service';
 
+type FilterBuilderValue = ReturnType<DxFilterBuilderComponent['instance']['getFilterExpression']>;
+
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
 }
@@ -20,11 +16,10 @@ const anyOfOperation = {
   caption: 'Is any of',
   icon: 'check',
   editorTemplate: 'tagBoxTemplate',
-  calculateFilterExpression(filterValue: any, field: any) {
-    return filterValue && filterValue.length
-                && Array.prototype.concat.apply([], filterValue.map((value) => [[field.dataField, '=', value], 'or'])).slice(0, -1);
-  },
-};
+  calculateFilterExpression: (filterValue: string[], field: Record<string, unknown>) => filterValue?.flatMap(
+    (value) => [[field.dataField, '=', value], 'or'],
+  ).slice(0, -1),
+} as const;
 
 @Component({
   selector: 'demo-app',
@@ -34,44 +29,49 @@ const anyOfOperation = {
 })
 
 export class AppComponent {
-  filterText: any;
-
-  dataSourceText: any;
+  filterText: string;
 
-  fields: Array<any>;
+  dataSourceText: string;
 
-  customOperations: Array<any>;
+  fields: Array<string>;
 
-  filter: any;
+  filter: Array<string[] | string>;
 
   categories: string[];
 
-  groupOperations: string[] = ['and', 'or'];
+  customOperations: Array<typeof anyOfOperation> = [anyOfOperation];
+
+  groupOperations = ['and', 'or'];
 
   constructor(service: Service) {
     this.fields = service.getFields();
     this.filter = service.getFilter();
     this.categories = service.getCategories();
-    this.customOperations = [anyOfOperation];
   }
 
-  updateTexts(e) {
+  updateTexts(e: DxFilterBuilderTypes.InitializedEvent) {
     this.filterText = AppComponent.formatValue(e.component.option('value'));
     this.dataSourceText = AppComponent.formatValue(e.component.getFilterExpression());
   }
 
-  private static formatValue(value, spaces = 0) {
+  private static formatValue(value: FilterBuilderValue, spaces = 0) {
     if (value && Array.isArray(value[0])) {
       const TAB_SIZE = 4;
+
       spaces = spaces || TAB_SIZE;
-      return `[${AppComponent.getLineBreak(spaces)}${value.map((item) => (Array.isArray(item[0]) ? AppComponent.formatValue(item, spaces + TAB_SIZE) : JSON.stringify(item))).join(`,${AppComponent.getLineBreak(spaces)}`)}${AppComponent.getLineBreak(spaces - TAB_SIZE)}]`;
+
+      return `[${AppComponent.getLineBreak(spaces)}${
+        (value as string[]).map(
+          (item: FilterBuilderValue) => (Array.isArray(item[0])
+            ? AppComponent.formatValue(item, spaces + TAB_SIZE)
+            : JSON.stringify(item)),
+        ).join(`,${AppComponent.getLineBreak(spaces)}`)
+      }${AppComponent.getLineBreak(spaces - TAB_SIZE)}]`;
     }
     return JSON.stringify(value);
   }
 
-  private static getLineBreak(spaces) {
-    return `\r\n${new Array(spaces + 1).join(' ')}`;
-  }
+  private static getLineBreak = (spaces: number) => `\r\n${new Array(spaces + 1).join(' ')}`;
 }
 
 @NgModule({
diff --git a/JSDemos/Demos/FilterBuilder/Customization/React/data.ts b/JSDemos/Demos/FilterBuilder/Customization/React/data.ts
index 8c711f9f903..969928054ec 100644
--- a/JSDemos/Demos/FilterBuilder/Customization/React/data.ts
+++ b/JSDemos/Demos/FilterBuilder/Customization/React/data.ts
@@ -16,8 +16,8 @@ export const categories = [
   'Projectors',
   'Automation',
 ];
-export const groupOperations: FilterBuilderTypes.Properties['groupOperations'] = ['and', 'or'];
-export const fields: FilterBuilderTypes.Properties['fields'] = [{
+export const groupOperations: FilterBuilderTypes.GroupOperation[] = ['and', 'or'];
+export const fields: FilterBuilderTypes.Field[] = [{
   dataField: 'Name',
 }, {
   dataField: 'Price',
diff --git a/JSDemos/Demos/FilterBuilder/WithDataGrid/Angular/app/app.component.ts b/JSDemos/Demos/FilterBuilder/WithDataGrid/Angular/app/app.component.ts
index 017e82c4876..4d3127b624f 100644
--- a/JSDemos/Demos/FilterBuilder/WithDataGrid/Angular/app/app.component.ts
+++ b/JSDemos/Demos/FilterBuilder/WithDataGrid/Angular/app/app.component.ts
@@ -10,6 +10,7 @@ import {
 import DataSource from 'devextreme/data/data_source';
 import ODataStore from 'devextreme/data/odata/store';
 import { Service } from './app.service';
+import type { Fields, Condition } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
@@ -23,13 +24,13 @@ if (!/localhost/.test(document.location.host)) {
 })
 
 export class AppComponent {
-  dataSource: any;
+  dataSource: DataSource;
 
-  fields: Array<any>;
+  fields: Fields;
 
-  filter: any;
+  filter: Condition;
 
-  gridFilterValue: any;
+  gridFilterValue: Condition;
 
   constructor(service: Service) {
     this.fields = service.getFields();
diff --git a/JSDemos/Demos/FilterBuilder/WithDataGrid/Angular/app/app.service.ts b/JSDemos/Demos/FilterBuilder/WithDataGrid/Angular/app/app.service.ts
index 76fba539712..d9fb0ddff63 100644
--- a/JSDemos/Demos/FilterBuilder/WithDataGrid/Angular/app/app.service.ts
+++ b/JSDemos/Demos/FilterBuilder/WithDataGrid/Angular/app/app.service.ts
@@ -1,6 +1,9 @@
 import { Injectable } from '@angular/core';
 
-const filter: Array<any> = [
+export type Condition = Condition[] | string | number;
+export type Fields = typeof fields;
+
+const filter: Condition = [
   ['Product_Current_Inventory', '<>', 0],
   'or',
   [
@@ -9,7 +12,7 @@ const filter: Array<any> = [
     ['Product_Cost', '<', 200],
   ],
 ];
-const fields: Array<any> = [
+const fields: Record<string, string | number>[] = [
   {
     caption: 'ID',
     width: 50,
@@ -42,11 +45,11 @@ const fields: Array<any> = [
 
 @Injectable()
 export class Service {
-  getFields(): Array<any> {
+  getFields(): Fields {
     return fields;
   }
 
-  getFilter(): Array<any> {
+  getFilter(): Condition {
     return filter;
   }
 }
diff --git a/JSDemos/Demos/FilterBuilder/WithList/Angular/app/app.component.ts b/JSDemos/Demos/FilterBuilder/WithList/Angular/app/app.component.ts
index 0a5187a1a9b..546f4a0f35a 100644
--- a/JSDemos/Demos/FilterBuilder/WithList/Angular/app/app.component.ts
+++ b/JSDemos/Demos/FilterBuilder/WithList/Angular/app/app.component.ts
@@ -11,7 +11,7 @@ import {
   DxFilterBuilderModule,
 } from 'devextreme-angular';
 import DataSource from 'devextreme/data/data_source';
-import { Service } from './app.service';
+import { Fields, Filter, Service } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
@@ -27,11 +27,11 @@ if (!/localhost/.test(document.location.host)) {
 export class AppComponent {
   @ViewChild(DxFilterBuilderComponent, { static: false }) filterBuilder: DxFilterBuilderComponent;
 
-  dataSource: any;
+  dataSource: DataSource;
 
-  fields: Array<any>;
+  fields: Fields;
 
-  filter: any;
+  filter: Filter;
 
   constructor(service: Service) {
     this.fields = service.getFields();
diff --git a/JSDemos/Demos/FilterBuilder/WithList/Angular/app/app.service.ts b/JSDemos/Demos/FilterBuilder/WithList/Angular/app/app.service.ts
index d0c4f92bc63..71af817cabd 100644
--- a/JSDemos/Demos/FilterBuilder/WithList/Angular/app/app.service.ts
+++ b/JSDemos/Demos/FilterBuilder/WithList/Angular/app/app.service.ts
@@ -18,7 +18,7 @@ export class Product {
   ImageSrc: string;
 }
 
-const filter: Array<any> = [
+const filter = [
   ['Category', '=', 'Video Players'],
   'or',
   [
@@ -40,7 +40,7 @@ const categories: string[] = [
   'Projectors',
   'Automation',
 ];
-const fields: Array<any> = [
+const fields = [
   {
     dataField: 'ID',
     dataType: 'number',
@@ -226,3 +226,6 @@ export class Service {
     return filter;
   }
 }
+
+export type Fields = typeof fields;
+export type Filter = typeof filter;
diff --git a/JSDemos/Demos/FilterBuilder/WithList/React/data.ts b/JSDemos/Demos/FilterBuilder/WithList/React/data.ts
index fd4df6940e4..ac1a006f4eb 100644
--- a/JSDemos/Demos/FilterBuilder/WithList/React/data.ts
+++ b/JSDemos/Demos/FilterBuilder/WithList/React/data.ts
@@ -22,7 +22,7 @@ const categories = [
   'Projectors',
   'Automation',
 ];
-export const fields: FilterBuilderTypes.Properties['fields'] = [
+export const fields: FilterBuilderTypes.Field[] = [
   {
     dataField: 'ID',
     dataType: 'number',
diff --git a/JSDemos/Demos/FloatingActionButton/Overview/Angular/app/app.component.ts b/JSDemos/Demos/FloatingActionButton/Overview/Angular/app/app.component.ts
index 407890ed6cd..55e7647caea 100644
--- a/JSDemos/Demos/FloatingActionButton/Overview/Angular/app/app.component.ts
+++ b/JSDemos/Demos/FloatingActionButton/Overview/Angular/app/app.component.ts
@@ -3,16 +3,11 @@ import {
 } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
 import config from 'devextreme/core/config';
 import repaintFloatingActionButton from 'devextreme/ui/speed_dial_action/repaint_floating_action_button';
-import {
-  DxDataGridModule,
-  DxDataGridComponent,
-  DxSpeedDialActionModule,
-  DxSelectBoxModule,
-} from 'devextreme-angular';
-
+import { DxSpeedDialActionModule } from 'devextreme-angular';
+import { DxDataGridModule, DxDataGridComponent, DxDataGridTypes } from 'devextreme-angular/ui/data-grid';
+import { DxSelectBoxModule, DxSelectBoxTypes } from 'devextreme-angular/ui/select-box';
 import {
   Service, Employee, State, directions,
 } from './app.service';
@@ -34,14 +29,13 @@ export class AppComponent {
 
   states: State[];
 
-  directions: any;
+  directions = directions;
 
   selectedRowIndex = -1;
 
   constructor(private service: Service) {
     this.employees = service.getEmployees();
     this.states = service.getStates();
-    this.directions = directions;
   }
 
   editRow() {
@@ -59,11 +53,11 @@ export class AppComponent {
     this.grid.instance.deselectAll();
   }
 
-  selectedChanged(e) {
+  selectedChanged(e: DxDataGridTypes.SelectionChangedEvent) {
     this.selectedRowIndex = e.component.getRowIndexByKey(e.selectedRowKeys[0]);
   }
 
-  directionChanged(e) {
+  directionChanged(e: DxSelectBoxTypes.SelectionChangedEvent) {
     config({
       floatingActionButtonConfig: this.directions[e.selectedItem],
     });
diff --git a/JSDemos/Demos/FloatingActionButton/Overview/Angular/app/app.service.ts b/JSDemos/Demos/FloatingActionButton/Overview/Angular/app/app.service.ts
index a98e1f9bcdd..b1a2cc534ad 100644
--- a/JSDemos/Demos/FloatingActionButton/Overview/Angular/app/app.service.ts
+++ b/JSDemos/Demos/FloatingActionButton/Overview/Angular/app/app.service.ts
@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 
-export const directions: any = {
+export const directions = {
   auto: {
     icon: 'rowfield',
     shading: true,
diff --git a/JSDemos/Demos/Form/ColumnsAdaptability/Angular/app/app.component.ts b/JSDemos/Demos/Form/ColumnsAdaptability/Angular/app/app.component.ts
index af076a730bb..e1c3be13e8b 100644
--- a/JSDemos/Demos/Form/ColumnsAdaptability/Angular/app/app.component.ts
+++ b/JSDemos/Demos/Form/ColumnsAdaptability/Angular/app/app.component.ts
@@ -1,10 +1,8 @@
-import {
-  NgModule, Component, ViewChild, enableProdMode,
-} from '@angular/core';
+import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { DxFormModule, DxCheckBoxModule } from 'devextreme-angular';
-
+import { DxFormModule } from 'devextreme-angular';
+import { DxCheckBoxModule, DxCheckBoxTypes } from 'devextreme-angular/ui/check-box';
 import { Employee, Service } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {
@@ -20,21 +18,18 @@ if (!/localhost/.test(document.location.host)) {
 export class AppComponent {
   employee: Employee;
 
-  colCountByScreen: Object;
+  colCountByScreen = {
+    md: 4,
+    sm: 2,
+  };
 
   constructor(service: Service) {
     this.employee = service.getEmployee();
-    this.colCountByScreen = {
-      md: 4,
-      sm: 2,
-    };
   }
 
-  screen(width) {
-    return width < 720 ? 'sm' : 'md';
-  }
+  screen = (width: number) => (width < 720 ? 'sm' : 'md');
 
-  valueChanged(e) {
+  valueChanged(e: DxCheckBoxTypes.ValueChangedEvent) {
     if (e.value) {
       this.colCountByScreen = null;
     } else {
diff --git a/JSDemos/Demos/Form/Overview/Angular/app/app.component.ts b/JSDemos/Demos/Form/Overview/Angular/app/app.component.ts
index 2fc9273caad..e5828ded933 100644
--- a/JSDemos/Demos/Form/Overview/Angular/app/app.component.ts
+++ b/JSDemos/Demos/Form/Overview/Angular/app/app.component.ts
@@ -1,13 +1,8 @@
 import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import {
-  DxCheckBoxModule,
-  DxSelectBoxModule,
-  DxNumberBoxModule,
-  DxFormModule,
-} from 'devextreme-angular';
-
+import { DxCheckBoxModule, DxNumberBoxModule, DxSelectBoxModule } from 'devextreme-angular';
+import { DxFormModule, DxFormTypes } from 'devextreme-angular/ui/form';
 import { Company, Service } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {
@@ -23,27 +18,21 @@ if (!/localhost/.test(document.location.host)) {
 export class AppComponent {
   companies: Company[];
 
-  labelMode: string;
+  width: number;
 
-  labelLocation: string;
+  labelMode: DxFormTypes.FormLabelMode = 'floating';
 
-  readOnly: boolean;
+  labelLocation: DxFormTypes.LabelLocation = 'left';
 
-  showColon: boolean;
+  readOnly = false;
 
-  minColWidth: number;
+  showColon = true;
 
-  colCount: number;
+  minColWidth = 300;
 
-  width: any;
+  colCount = 2;
 
   constructor(service: Service) {
-    this.labelMode = 'floating';
-    this.labelLocation = 'left';
-    this.readOnly = false;
-    this.showColon = true;
-    this.minColWidth = 300;
-    this.colCount = 2;
     this.companies = service.getCompanies();
   }
 
diff --git a/JSDemos/Demos/Form/UpdateItemsDynamically/Angular/app/app.component.ts b/JSDemos/Demos/Form/UpdateItemsDynamically/Angular/app/app.component.ts
index 8f91ee1a075..1bb75f180f9 100644
--- a/JSDemos/Demos/Form/UpdateItemsDynamically/Angular/app/app.component.ts
+++ b/JSDemos/Demos/Form/UpdateItemsDynamically/Angular/app/app.component.ts
@@ -1,12 +1,10 @@
-import {
-  NgModule, Component, enableProdMode, AfterViewInit,
-} from '@angular/core';
+import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import {
-  DxFormModule,
-} from 'devextreme-angular';
-
+import { DxFormModule } from 'devextreme-angular';
+import { DxCheckBoxTypes } from 'devextreme-angular/ui/check-box';
+import { DxButtonTypes } from 'devextreme-angular/ui/button';
+import { DxTextBoxTypes } from 'devextreme-angular/ui/text-box';
 import { Employee, Service } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {
@@ -20,52 +18,39 @@ if (!/localhost/.test(document.location.host)) {
   styleUrls: ['app/app.component.css'],
 })
 
-export class AppComponent implements AfterViewInit {
+export class AppComponent {
   employee: Employee;
 
-  isHomeAddressVisible: boolean;
+  isHomeAddressVisible = true;
 
-  checkBoxOptions: any;
+  phoneOptions: DxTextBoxTypes.Properties[] = [];
 
-  phoneOptions: any[] = [];
+  checkBoxOptions: DxCheckBoxTypes.Properties = {
+    text: 'Show Address',
+    value: true,
+    onValueChanged: (e: DxCheckBoxTypes.ValueChangedEvent) => {
+      this.isHomeAddressVisible = e.component.option('value');
+    },
+  };
 
-  addPhoneButtonOptions: any;
+  addPhoneButtonOptions: DxButtonTypes.Properties = {
+    icon: 'add',
+    text: 'Add phone',
+    onClick: () => {
+      this.employee.Phones.push('');
+      this.phoneOptions = this.getPhonesOptions(this.employee.Phones);
+    },
+  };
 
   constructor(service: Service) {
     this.employee = service.getEmployee();
-    this.isHomeAddressVisible = true;
 
     this.phoneOptions = this.getPhonesOptions(this.employee.Phones);
-
-    this.checkBoxOptions = {
-      text: 'Show Address',
-      value: true,
-      onValueChanged: (e) => {
-        this.isHomeAddressVisible = e.component.option('value');
-      },
-    };
-
-    this.addPhoneButtonOptions = {
-      icon: 'add',
-      text: 'Add phone',
-      onClick: () => {
-        this.employee.Phones.push('');
-        this.phoneOptions = this.getPhonesOptions(this.employee.Phones);
-      },
-    };
   }
 
-  ngAfterViewInit(): void {}
-
-  getPhonesOptions(phones: any) {
-    const options = [];
-    for (let i = 0; i < phones.length; i++) {
-      options.push(this.generateNewPhoneOptions(i));
-    }
-    return options;
-  }
+  getPhonesOptions = (phones: string[]) => phones.map((_, index) => this.generateNewPhoneOptions(index));
 
-  generateNewPhoneOptions(index: number) {
+  generateNewPhoneOptions(index: number): DxTextBoxTypes.Properties {
     return {
       mask: '+1 (X00) 000-0000',
       maskRules: { X: /[01-9]/ },
diff --git a/JSDemos/Demos/Form/Validation/Angular/app/app.component.ts b/JSDemos/Demos/Form/Validation/Angular/app/app.component.ts
index da912f60714..ca10285be8b 100644
--- a/JSDemos/Demos/Form/Validation/Angular/app/app.component.ts
+++ b/JSDemos/Demos/Form/Validation/Angular/app/app.component.ts
@@ -7,16 +7,20 @@ import {
   DxCheckBoxModule,
   DxSelectBoxModule,
   DxNumberBoxModule,
-  DxButtonModule,
-  DxFormModule,
   DxAutocompleteModule,
-  DxFormComponent,
 } from 'devextreme-angular';
 import notify from 'devextreme/ui/notify';
 import Validator from 'devextreme/ui/validator';
-
+import { AsyncRule } from 'devextreme-angular/common';
+import { DxFormModule, DxFormComponent, DxFormTypes } from 'devextreme-angular/ui/form';
+import { DxTextBoxTypes } from 'devextreme-angular/ui/text-box';
+import { DxDateBoxTypes } from 'devextreme-angular/ui/date-box';
+import { DxDateRangeBoxTypes } from 'devextreme-angular/ui/date-range-box';
+import { DxButtonModule, DxButtonTypes } from 'devextreme-angular/ui/button';
 import { Customer, Service } from './app.service';
 
+type EditorOptions = DxTextBoxTypes.Properties;
+
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
 }
@@ -37,9 +41,23 @@ const sendRequest = function (value) {
   styleUrls: ['app/app.component.css'],
 })
 export class AppComponent {
-  @ViewChild(DxFormComponent, { static: false }) form:DxFormComponent;
+  @ViewChild(DxFormComponent, { static: false }) form: DxFormComponent;
+
+  customer: Customer;
+
+  countries: string[];
+
+  cities: string[];
+
+  maxDate: Date = new Date();
+
+  cityPattern = '^[^0-9]+$';
+
+  namePattern = /^[^0-9]+$/;
+
+  phonePattern = /^[02-9]\d{9}$/;
 
-  passwordEditorOptions: any = {
+  passwordEditorOptions: EditorOptions = {
     mode: 'password',
     valueChangeEvent: 'keyup',
     onValueChanged: () => {
@@ -62,19 +80,19 @@ export class AppComponent {
     ],
   };
 
-  emailEditorOptions: any = {
+  emailEditorOptions: EditorOptions = {
     valueChangeEvent: 'keyup',
   };
 
-  nameEditorOptions: any = {
+  nameEditorOptions: EditorOptions = {
     valueChangeEvent: 'keyup',
   };
 
-  addressEditorOptions: any = {
+  addressEditorOptions: EditorOptions = {
     valueChangeEvent: 'keyup',
   };
 
-  phoneEditorOptions: any = {
+  phoneEditorOptions: EditorOptions = {
     mask: '+1 (X00) 000-0000',
     maskRules: {
       X: /[02-9]/,
@@ -83,65 +101,49 @@ export class AppComponent {
     valueChangeEvent: 'keyup',
   };
 
-  confirmPasswordEditorOptions: any = {
+  confirmPasswordEditorOptions: EditorOptions = {
     mode: 'password',
     valueChangeEvent: 'keyup',
     buttons: [
       {
         name: 'password',
-        stylingMode: 'text',
-        icon: 'eyeopen',
         location: 'after',
         options: {
-          stylingMode: 'text',
           icon: 'eyeopen',
+          stylingMode: 'text',
           onClick: () => this.changePasswordMode('ConfirmPassword'),
         },
       },
     ],
   };
 
-  colCountByScreen = {
+  colCountByScreen: DxFormTypes.GroupItem['colCountByScreen'] = {
     xs: 2,
     sm: 2,
     md: 2,
     lg: 2,
   };
 
-  customer: Customer;
-
-  countries: string[];
-
-  cities: string[];
-
-  maxDate: Date = new Date();
-
-  cityPattern = '^[^0-9]+$';
-
-  namePattern: any = /^[^0-9]+$/;
-
-  phonePattern: any = /^[02-9]\d{9}$/;
-
-  dateBoxOptions = {
+  dateBoxOptions: DxDateBoxTypes.Properties = {
     placeholder: 'Birth Date',
     acceptCustomValue: false,
     openOnFieldClick: true,
   };
 
-  dateRangeBoxOptions = {
+  dateRangeBoxOptions: DxDateRangeBoxTypes.Properties = {
     startDatePlaceholder: 'Start Date',
     endDatePlaceholder: 'End Date',
     acceptCustomValue: false,
   };
 
-  registerButtonOptions = {
+  registerButtonOptions: DxButtonTypes.Properties = {
     text: 'Register',
     type: 'default',
     width: '120px',
     useSubmitBehavior: true,
   };
 
-  resetButtonOptions = {
+  resetButtonOptions: DxButtonTypes.Properties = {
     text: 'Reset',
     width: '120px',
     disabled: true,
@@ -151,13 +153,20 @@ export class AppComponent {
     },
   };
 
+  constructor(service: Service) {
+    this.maxDate = new Date(this.maxDate.setFullYear(this.maxDate.getFullYear() - 21));
+    this.countries = service.getCountries();
+    this.cities = service.getCities();
+    this.customer = service.getCustomer();
+  }
+
   passwordComparison = () => this.form.instance.option('formData').Password;
 
   checkComparison() {
     return true;
   }
 
-  changePasswordMode = (name) => {
+  changePasswordMode = (name: string) => {
     let editor = this.form.instance.getEditor(name);
     editor.option(
       'mode',
@@ -165,13 +174,6 @@ export class AppComponent {
     );
   };
 
-  constructor(service: Service) {
-    this.maxDate = new Date(this.maxDate.setFullYear(this.maxDate.getFullYear() - 21));
-    this.countries = service.getCountries();
-    this.cities = service.getCities();
-    this.customer = service.getCustomer();
-  }
-
   validateVacationDatesRange({ value }) {
     const [startDate, endDate] = value;
 
@@ -195,11 +197,9 @@ export class AppComponent {
     return startDate !== null && endDate !== null;
   }
 
-  asyncValidation(params) {
-    return sendRequest(params.value);
-  }
+  asyncValidation: AsyncRule['validationCallback'] = ({ value }) => sendRequest(value);
 
-  onFormSubmit = function (e) {
+  onFormSubmit = (e: SubmitEvent) => {
     notify({
       message: 'You have submitted the form',
       position: {
@@ -211,7 +211,7 @@ export class AppComponent {
     e.preventDefault();
   };
 
-  onOptionChanged = function (e) {
+  onOptionChanged = (e: DxFormTypes.OptionChangedEvent) => {
     if (e.name === 'isDirty') {
       const resetButton = this.form.instance.getButton('Reset');
       resetButton.option('disabled', !e.value);
diff --git a/JSDemos/Demos/Gallery/Overview/Angular/app/app.component.ts b/JSDemos/Demos/Gallery/Overview/Angular/app/app.component.ts
index 74c1c5518ea..512f345028f 100644
--- a/JSDemos/Demos/Gallery/Overview/Angular/app/app.component.ts
+++ b/JSDemos/Demos/Gallery/Overview/Angular/app/app.component.ts
@@ -1,8 +1,8 @@
 import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { DxCheckBoxModule, DxGalleryModule } from 'devextreme-angular';
-
+import { DxGalleryModule } from 'devextreme-angular';
+import { DxCheckBoxModule, DxCheckBoxTypes } from 'devextreme-angular/ui/check-box';
 import { Service } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {
@@ -24,7 +24,7 @@ export class AppComponent {
     this.dataSource = service.getImages();
   }
 
-  valueChanged(e) {
+  valueChanged(e: DxCheckBoxTypes.ValueChangedEvent) {
     this.slideshowDelay = e.value ? 2000 : 0;
   }
 }
diff --git a/JSDemos/Demos/Gantt/ChartAppearance/Angular/app/app.component.ts b/JSDemos/Demos/Gantt/ChartAppearance/Angular/app/app.component.ts
index cda1f9a2758..d4a5a2b2efd 100644
--- a/JSDemos/Demos/Gantt/ChartAppearance/Angular/app/app.component.ts
+++ b/JSDemos/Demos/Gantt/ChartAppearance/Angular/app/app.component.ts
@@ -2,9 +2,8 @@ import { ViewEncapsulation } from '@angular/compiler/src/core';
 import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import {
-  DxGanttModule, DxCheckBoxModule, DxSelectBoxModule, DxDateBoxModule,
-} from 'devextreme-angular';
+import { DxCheckBoxModule, DxSelectBoxModule, DxDateBoxModule } from 'devextreme-angular';
+import { DxGanttModule, DxGanttTypes } from 'devextreme-angular/ui/gantt';
 import {
   Service, Task, Dependency, Resource, ResourceAssignment,
 } from './app.service';
@@ -30,44 +29,37 @@ export class AppComponent {
 
   resourceAssignments: ResourceAssignment[];
 
-  scaleType: string;
+  scaleType: DxGanttTypes.Properties['scaleType'] = 'months';
 
-  titlePosition: string;
+  titlePosition: DxGanttTypes.Properties['taskTitlePosition'] = 'outside';
 
-  showResources: boolean;
+  showResources = true;
 
-  showDependencies: boolean;
+  showDependencies = true;
 
-  showCustomTaskTooltip: boolean;
+  showCustomTaskTooltip = true;
 
-  startDateRange: Date;
+  startDateRange = new Date(2018, 11, 1);
 
-  endDateRange: Date;
+  endDateRange = new Date(2019, 11, 1);
 
   constructor(service: Service) {
     this.tasks = service.getTasks();
     this.dependencies = service.getDependencies();
     this.resources = service.getResources();
     this.resourceAssignments = service.getResourceAssignments();
-    this.scaleType = 'months';
-    this.titlePosition = 'outside';
-    this.showResources = true;
-    this.showDependencies = true;
-    this.showCustomTaskTooltip = true;
-    this.startDateRange = new Date(2018, 11, 1);
-    this.endDateRange = new Date(2019, 11, 1);
   }
 
-  getTimeEstimate(task) {
-    return Math.abs(task.start - task.end) / 36e5;
+  getTimeEstimate(task: Task) {
+    return Math.abs((task.start as unknown as number) - (task.end as unknown as number)) / 36e5;
   }
 
-  getTimeLeft(task) {
-    const timeEstimate = Math.abs(task.start - task.end) / 36e5;
+  getTimeLeft(task: Task) {
+    const timeEstimate = Math.abs((task.start as unknown as number) - (task.end as unknown as number)) / 36e5;
     return Math.floor((100 - task.progress) / 100 * timeEstimate);
   }
 
-  getTime(date) {
+  getTime(date: Date) {
     return date.toLocaleString();
   }
 }
diff --git a/JSDemos/Demos/Gantt/ContextMenu/Angular/app/app.component.ts b/JSDemos/Demos/Gantt/ContextMenu/Angular/app/app.component.ts
index af125106c19..57e7c9eefac 100644
--- a/JSDemos/Demos/Gantt/ContextMenu/Angular/app/app.component.ts
+++ b/JSDemos/Demos/Gantt/ContextMenu/Angular/app/app.component.ts
@@ -1,7 +1,8 @@
 import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { DxGanttModule, DxCheckBoxModule } from 'devextreme-angular';
+import { DxGanttModule, DxGanttTypes } from 'devextreme-angular/ui/gantt';
+import { DxCheckBoxModule, DxCheckBoxTypes } from 'devextreme-angular/ui/check-box';
 import {
   Service, Task, Dependency, Resource, ResourceAssignment,
 } from './app.service';
@@ -26,35 +27,32 @@ export class AppComponent {
 
   resourceAssignments: ResourceAssignment[];
 
-  contextMenuItems: {};
+  showResources = true;
 
-  showResources: boolean;
+  disableContextMenu = false;
 
-  disableContextMenu: boolean;
+  contextMenuItems = this.getContextMenuItems();
 
   constructor(service: Service) {
     this.tasks = service.getTasks();
     this.dependencies = service.getDependencies();
     this.resources = service.getResources();
     this.resourceAssignments = service.getResourceAssignments();
-    this.showResources = true,
-    this.disableContextMenu = false,
-    this.contextMenuItems = this.getContextMenuItems();
   }
 
-  onContextMenuPreparing(e) {
+  onContextMenuPreparing(e: DxGanttTypes.ContextMenuPreparingEvent) {
     e.cancel = this.disableContextMenu;
   }
 
-  onCustomizeContextMenu(e) {
+  onCustomizeContextMenu(e: DxCheckBoxTypes.ValueChangedEvent) {
     this.contextMenuItems = e.value ? this.getContextMenuItems() : undefined;
   }
 
-  onPreventContextMenuShowing(e) {
+  onPreventContextMenuShowing(e: DxCheckBoxTypes.ValueChangedEvent) {
     this.disableContextMenu = e.value;
   }
 
-  onCustomCommandClick(e) {
+  onCustomCommandClick(e: DxGanttTypes.CustomCommandEvent) {
     if (e.name == 'ToggleDisplayOfResources') {
       this.showResources = !this.showResources;
     }
diff --git a/JSDemos/Demos/Gantt/ExportToPDF/Angular/app/app.component.html b/JSDemos/Demos/Gantt/ExportToPDF/Angular/app/app.component.html
index 8d2eb9b20f0..34d3199e9b8 100644
--- a/JSDemos/Demos/Gantt/ExportToPDF/Angular/app/app.component.html
+++ b/JSDemos/Demos/Gantt/ExportToPDF/Angular/app/app.component.html
@@ -64,6 +64,7 @@
       <div class="value">
         <dx-select-box
           [items]="dateRanges"
+          [displayExpr]="capitalize"
           [inputAttr]="{ 'aria-label': 'Date Range' }"
           [(value)]="dateRangeBoxValue"
           (onValueChanged)="onDateRangeBoxSelectionChanged($event)"
diff --git a/JSDemos/Demos/Gantt/ExportToPDF/Angular/app/app.component.ts b/JSDemos/Demos/Gantt/ExportToPDF/Angular/app/app.component.ts
index db189e1433e..e9eeb464f26 100644
--- a/JSDemos/Demos/Gantt/ExportToPDF/Angular/app/app.component.ts
+++ b/JSDemos/Demos/Gantt/ExportToPDF/Angular/app/app.component.ts
@@ -1,24 +1,31 @@
 import {
-  NgModule, Component, enableProdMode, ViewChild, QueryList, ViewChildren, ChangeDetectorRef,
+  NgModule, Component, enableProdMode, ViewChild, ChangeDetectorRef,
 } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
 import {
-  DxGanttComponent, DxGanttModule, DxSelectBoxModule, DxCheckBoxModule, DxNumberBoxModule, DxDateBoxModule,
+  DxGanttComponent,
+  DxGanttModule,
+  DxCheckBoxModule,
+  DxNumberBoxModule,
+  DxDateBoxModule,
 } from 'devextreme-angular';
 import { exportGantt as exportGanttToPdf } from 'devextreme/pdf_exporter';
 import { jsPDF } from 'jspdf';
+import 'jspdf-autotable';
+import { DxSelectBoxModule, DxSelectBoxTypes } from 'devextreme-angular/ui/select-box';
+import { DxButtonTypes } from 'devextreme-angular/ui/button';
 import {
   Service, Task, Dependency, Resource, ResourceAssignment,
 } from './app.service';
 
-import 'jspdf-autotable';
-
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
 }
 
+type ExportMode = Parameters<typeof exportGanttToPdf>[0]['exportMode'];
+type DateRange = Parameters<typeof exportGanttToPdf>[0]['dateRange'];
+
 @Component({
   selector: 'demo-app',
   templateUrl: 'app/app.component.html',
@@ -29,62 +36,52 @@ if (!/localhost/.test(document.location.host)) {
 export class AppComponent {
   @ViewChild(DxGanttComponent, { static: false }) gantt: DxGanttComponent;
 
-  formats: string[] = ['A0', 'A1', 'A2', 'A3', 'A4', 'Auto'];
+  startDate: Date;
 
-  exportModes: string[] = ['All', 'Chart', 'Tree List'];
+  endDate: Date;
 
-  dateRanges: string[] = ['All', 'Visible', 'Custom'];
+  tasks: Task[];
 
-  formatBoxValue: string;
+  dependencies: Dependency[];
 
-  exportModeBoxValue: string;
+  resources: Resource[];
 
-  dateRangeBoxValue: string;
+  resourceAssignments: ResourceAssignment[];
 
-  landscapeCheckBoxValue: boolean;
+  startTaskIndex = 0;
 
-  startTaskIndex: number;
+  endTaskIndex = 3;
 
-  endTaskIndex: number;
+  customRangeDisabled = true;
 
-  startDate: Date;
+  formats = ['A0', 'A1', 'A2', 'A3', 'A4', 'Auto'];
 
-  endDate: Date;
+  exportModes = ['All', 'Chart', 'Tree List'];
 
-  customRangeDisabled: boolean;
+  dateRanges = ['all', 'visible', 'custom'];
 
-  tasks: Task[];
+  formatBoxValue = this.formats[0];
 
-  dependencies: Dependency[];
+  landscapeCheckBoxValue = true;
 
-  resources: Resource[];
+  exportModeBoxValue = this.exportModes[0];
 
-  resourceAssignments: ResourceAssignment[];
+  dateRangeBoxValue = this.dateRanges[1];
 
-  exportButtonOptions: any;
+  exportButtonOptions: DxButtonTypes.Properties = {
+    hint: 'Export to PDF',
+    icon: 'exportpdf',
+    stylingMode: 'text',
+    onClick: () => this.exportButtonClick(),
+  };
 
   constructor(service: Service, private ref: ChangeDetectorRef) {
     this.tasks = service.getTasks();
     this.dependencies = service.getDependencies();
     this.resources = service.getResources();
     this.resourceAssignments = service.getResourceAssignments();
-
-    this.exportButtonOptions = {
-      hint: 'Export to PDF',
-      icon: 'exportpdf',
-      stylingMode: 'text',
-      onClick: () => this.exportButtonClick(),
-    };
-
-    this.formatBoxValue = this.formats[0];
-    this.landscapeCheckBoxValue = true;
-    this.exportModeBoxValue = this.exportModes[0];
-    this.dateRangeBoxValue = this.dateRanges[1];
-    this.startTaskIndex = 0;
-    this.endTaskIndex = 3;
     this.startDate = this.tasks[0].start;
     this.endDate = this.tasks[0].end;
-    this.customRangeDisabled = true;
   }
 
   exportButtonClick() {
@@ -92,39 +89,44 @@ export class AppComponent {
     const format = this.formatBoxValue.toLowerCase();
     const isLandscape = this.landscapeCheckBoxValue;
     const exportMode = this.getExportMode();
-    const dataRangeMode = this.dateRangeBoxValue.toLowerCase();
-    let dataRange;
+    const dataRangeMode = this.dateRangeBoxValue;
+    let dateRange: DateRange;
+
     if (dataRangeMode === 'custom') {
-      dataRange = {
+      dateRange = {
         startIndex: this.startTaskIndex,
         endIndex: this.endTaskIndex,
         startDate: this.startDate,
         endDate: this.endDate,
       };
     } else {
-      dataRange = dataRangeMode;
+      dateRange = dataRangeMode as Exclude<DateRange, 'custom'>;
     }
+
     exportGanttToPdf(
       {
         component: gantt,
-        createDocumentMethod: (args?: any) => new jsPDF(args),
+        createDocumentMethod: (args?: unknown) => new jsPDF(args),
         format,
         landscape: isLandscape,
         exportMode,
-        dateRange: dataRange,
+        dateRange,
       },
     ).then((doc) => doc.save('gantt.pdf'));
   }
 
-  getExportMode() {
-    if (this.exportModeBoxValue === 'Tree List') { return 'treeList'; }
-    if (this.exportModeBoxValue === 'All') { return 'all'; }
-    if (this.exportModeBoxValue === 'Chart') { return 'chart'; }
-    return 'all';
-  }
+  capitalize = ([firstLetter, ...restLetters]: string) => firstLetter.toUpperCase() + restLetters;
+
+  getExportMode: () => ExportMode = () => {
+    const modes: Record<string, ExportMode> = {
+      'Tree List': 'treeList',
+      Chart: 'chart',
+    };
+    return modes[this.exportModeBoxValue] || 'all';
+  };
 
-  onDateRangeBoxSelectionChanged(e) {
-    this.customRangeDisabled = e.value !== 'Custom';
+  onDateRangeBoxSelectionChanged(e: DxSelectBoxTypes.ValueChangedEvent) {
+    this.customRangeDisabled = e.value !== 'custom';
     this.ref.detectChanges();
   }
 }
diff --git a/JSDemos/Demos/Gantt/Sorting/Angular/app/app.component.html b/JSDemos/Demos/Gantt/Sorting/Angular/app/app.component.html
index 12d67ecd55f..74dc59d8428 100644
--- a/JSDemos/Demos/Gantt/Sorting/Angular/app/app.component.html
+++ b/JSDemos/Demos/Gantt/Sorting/Angular/app/app.component.html
@@ -8,7 +8,7 @@
           [items]="['single', 'multiple', 'none']"
           [(value)]="sortingMode"
           [inputAttr]="{ 'aria-label': 'Sorting Mode' }"
-          (onValueChanged)="onSortingValueChanged($event)"
+          (onValueChanged)="onSortingValueChanged()"
         ></dx-select-box>
       </div>
     </div>
diff --git a/JSDemos/Demos/Gantt/Sorting/Angular/app/app.component.ts b/JSDemos/Demos/Gantt/Sorting/Angular/app/app.component.ts
index d62d2f835cd..8c0c52ca7a8 100644
--- a/JSDemos/Demos/Gantt/Sorting/Angular/app/app.component.ts
+++ b/JSDemos/Demos/Gantt/Sorting/Angular/app/app.component.ts
@@ -1,9 +1,8 @@
 import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
 import { DxGanttModule, DxSelectBoxModule, DxCheckBoxModule } from 'devextreme-angular';
-
+import { SingleOrMultiple } from 'devextreme-angular/common';
 import {
   Service, Task, Dependency, Resource, ResourceAssignment,
 } from './app.service';
@@ -28,23 +27,20 @@ export class AppComponent {
 
   resourceAssignments: ResourceAssignment[];
 
-  sortingMode: 'single' | 'multiple' | 'none';
+  showSortIndexes = false;
 
-  showSortIndexes: boolean;
+  showSortIndexDisabled = true;
 
-  showSortIndexDisabled: boolean;
+  sortingMode: SingleOrMultiple = 'single';
 
   constructor(service: Service) {
     this.tasks = service.getTasks();
     this.dependencies = service.getDependencies();
     this.resources = service.getResources();
     this.resourceAssignments = service.getResourceAssignments();
-    this.sortingMode = 'single';
-    this.showSortIndexes = false;
-    this.showSortIndexDisabled = true;
   }
 
-  onSortingValueChanged(e) {
+  onSortingValueChanged() {
     this.showSortIndexDisabled = this.sortingMode !== 'multiple';
   }
 }
diff --git a/JSDemos/Demos/Gantt/Toolbar/Angular/app/app.component.ts b/JSDemos/Demos/Gantt/Toolbar/Angular/app/app.component.ts
index c880bf83ea4..11005cab210 100644
--- a/JSDemos/Demos/Gantt/Toolbar/Angular/app/app.component.ts
+++ b/JSDemos/Demos/Gantt/Toolbar/Angular/app/app.component.ts
@@ -1,9 +1,8 @@
 import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
 import { DxGanttModule, DxPopupModule } from 'devextreme-angular';
-
+import { DxButtonTypes } from 'devextreme-angular/ui/button';
 import {
   Service, Task, Dependency, Resource, ResourceAssignment,
 } from './app.service';
@@ -28,25 +27,22 @@ export class AppComponent {
 
   resourceAssignments: ResourceAssignment[];
 
-  customButtonOptions: any;
+  popupVisible = false;
 
-  popupVisible: boolean;
+  customButtonOptions: DxButtonTypes.Properties = {
+    text: 'About',
+    icon: 'info',
+    stylingMode: 'text',
+    onClick: () => {
+      this.popupVisible = true;
+    },
+  };
 
   constructor(service: Service) {
     this.tasks = service.getTasks();
     this.dependencies = service.getDependencies();
     this.resources = service.getResources();
     this.resourceAssignments = service.getResourceAssignments();
-    this.popupVisible = false;
-
-    this.customButtonOptions = {
-      text: 'About',
-      icon: 'info',
-      stylingMode: 'text',
-      onClick: () => {
-        this.popupVisible = true;
-      },
-    };
   }
 }
 
diff --git a/JSDemos/Demos/Gauges/BaseValueForRangeBar/Angular/app/app.component.ts b/JSDemos/Demos/Gauges/BaseValueForRangeBar/Angular/app/app.component.ts
index f30f42965a1..23b76bda4ea 100644
--- a/JSDemos/Demos/Gauges/BaseValueForRangeBar/Angular/app/app.component.ts
+++ b/JSDemos/Demos/Gauges/BaseValueForRangeBar/Angular/app/app.component.ts
@@ -1,21 +1,22 @@
 import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { DxLinearGaugeModule, DxCircularGaugeModule } from 'devextreme-angular';
+import { DxCircularGaugeModule, DxCircularGaugeTypes } from 'devextreme-angular/ui/circular-gauge';
+import { DxLinearGaugeModule, DxLinearGaugeTypes } from 'devextreme-angular/ui/linear-gauge';
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
 }
 
+type ScaleLabel = DxLinearGaugeTypes.ScaleLabel | DxCircularGaugeTypes.ScaleLabel;
+
 @Component({
   selector: 'demo-app',
   templateUrl: 'app/app.component.html',
   styleUrls: ['app/app.component.css'],
 })
 export class AppComponent {
-  customizeText(arg: any) {
-    return `${arg.valueText}°`;
-  }
+  customizeText: ScaleLabel['customizeText'] = ({ valueText }) => `${valueText}°`;
 }
 
 @NgModule({
diff --git a/JSDemos/Demos/Gauges/DifferentSubvalueIndicatorTypesLinearGauge/Angular/app/app.component.ts b/JSDemos/Demos/Gauges/DifferentSubvalueIndicatorTypesLinearGauge/Angular/app/app.component.ts
index 7b956014d33..d9683c4a2d3 100644
--- a/JSDemos/Demos/Gauges/DifferentSubvalueIndicatorTypesLinearGauge/Angular/app/app.component.ts
+++ b/JSDemos/Demos/Gauges/DifferentSubvalueIndicatorTypesLinearGauge/Angular/app/app.component.ts
@@ -13,9 +13,7 @@ if (!/localhost/.test(document.location.host)) {
   styleUrls: ['app/app.component.css'],
 })
 export class AppComponent {
-  customizeText(arg: any) {
-    return `$${arg.valueText}`;
-  }
+  customizeText = ({ valueText }) => `$${valueText}`;
 }
 
 @NgModule({
diff --git a/JSDemos/Demos/Gauges/DifferentValueIndicatorTypes/Angular/app/app.component.ts b/JSDemos/Demos/Gauges/DifferentValueIndicatorTypes/Angular/app/app.component.ts
index ab43f692532..c255a4a4e3b 100644
--- a/JSDemos/Demos/Gauges/DifferentValueIndicatorTypes/Angular/app/app.component.ts
+++ b/JSDemos/Demos/Gauges/DifferentValueIndicatorTypes/Angular/app/app.component.ts
@@ -1,7 +1,7 @@
 import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { DxCircularGaugeModule } from 'devextreme-angular';
+import { DxCircularGaugeModule, DxCircularGaugeTypes } from 'devextreme-angular/ui/circular-gauge';
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
@@ -13,9 +13,7 @@ if (!/localhost/.test(document.location.host)) {
   styleUrls: ['app/app.component.css'],
 })
 export class AppComponent {
-  customizeText(arg: any) {
-    return `${arg.valueText} %`;
-  }
+  customizeText: DxCircularGaugeTypes.ScaleLabel['customizeText'] = ({ valueText }) => `${valueText} %`;
 }
 
 @NgModule({
diff --git a/JSDemos/Demos/Gauges/DifferentValueIndicatorTypesLinearGauge/Angular/app/app.component.ts b/JSDemos/Demos/Gauges/DifferentValueIndicatorTypesLinearGauge/Angular/app/app.component.ts
index a56a3e2daf9..f3807d48ee1 100644
--- a/JSDemos/Demos/Gauges/DifferentValueIndicatorTypesLinearGauge/Angular/app/app.component.ts
+++ b/JSDemos/Demos/Gauges/DifferentValueIndicatorTypesLinearGauge/Angular/app/app.component.ts
@@ -1,7 +1,7 @@
 import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { DxLinearGaugeModule } from 'devextreme-angular';
+import { DxLinearGaugeModule, DxLinearGaugeTypes } from 'devextreme-angular/ui/linear-gauge';
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
@@ -13,9 +13,7 @@ if (!/localhost/.test(document.location.host)) {
   styleUrls: ['app/app.component.css'],
 })
 export class AppComponent {
-  customizeText(arg: any) {
-    return `${arg.valueText} %`;
-  }
+  customizeText: DxLinearGaugeTypes.ScaleLabel['customizeText'] = ({ valueText }) => `${valueText} %`;
 }
 
 @NgModule({
diff --git a/JSDemos/Demos/Gauges/GaugeTooltip/Angular/app/app.component.ts b/JSDemos/Demos/Gauges/GaugeTooltip/Angular/app/app.component.ts
index 63b009f1e50..7d61823f39b 100644
--- a/JSDemos/Demos/Gauges/GaugeTooltip/Angular/app/app.component.ts
+++ b/JSDemos/Demos/Gauges/GaugeTooltip/Angular/app/app.component.ts
@@ -13,11 +13,9 @@ if (!/localhost/.test(document.location.host)) {
   styleUrls: ['app/app.component.css'],
 })
 export class AppComponent {
-  customizeTooltip(arg: any) {
-    return {
-      text: `${arg.valueText} ohm`,
-    };
-  }
+  customizeTooltip = ({ valueText }) => ({
+    text: `${valueText} ohm`,
+  });
 }
 
 @NgModule({
diff --git a/JSDemos/Demos/Gauges/ScaleLabelFormatting/Angular/app/app.component.ts b/JSDemos/Demos/Gauges/ScaleLabelFormatting/Angular/app/app.component.ts
index ab43f692532..c255a4a4e3b 100644
--- a/JSDemos/Demos/Gauges/ScaleLabelFormatting/Angular/app/app.component.ts
+++ b/JSDemos/Demos/Gauges/ScaleLabelFormatting/Angular/app/app.component.ts
@@ -1,7 +1,7 @@
 import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { DxCircularGaugeModule } from 'devextreme-angular';
+import { DxCircularGaugeModule, DxCircularGaugeTypes } from 'devextreme-angular/ui/circular-gauge';
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
@@ -13,9 +13,7 @@ if (!/localhost/.test(document.location.host)) {
   styleUrls: ['app/app.component.css'],
 })
 export class AppComponent {
-  customizeText(arg: any) {
-    return `${arg.valueText} %`;
-  }
+  customizeText: DxCircularGaugeTypes.ScaleLabel['customizeText'] = ({ valueText }) => `${valueText} %`;
 }
 
 @NgModule({
diff --git a/JSDemos/Demos/Gauges/SubvalueIndicatorTextFormatting/Angular/app/app.component.ts b/JSDemos/Demos/Gauges/SubvalueIndicatorTextFormatting/Angular/app/app.component.ts
index 4996b597d7a..42eccffce02 100644
--- a/JSDemos/Demos/Gauges/SubvalueIndicatorTextFormatting/Angular/app/app.component.ts
+++ b/JSDemos/Demos/Gauges/SubvalueIndicatorTextFormatting/Angular/app/app.component.ts
@@ -1,7 +1,7 @@
 import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { DxCircularGaugeModule } from 'devextreme-angular';
+import { DxCircularGaugeModule, DxCircularGaugeTypes } from 'devextreme-angular/ui/circular-gauge';
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
@@ -13,9 +13,7 @@ if (!/localhost/.test(document.location.host)) {
   styleUrls: ['app/app.component.css'],
 })
 export class AppComponent {
-  customizeText(arg: any) {
-    return `${arg.valueText} °C`;
-  }
+  customizeText: DxCircularGaugeTypes.ScaleLabel['customizeText'] = ({ valueText }) => `${valueText} °C`;
 }
 
 @NgModule({
diff --git a/JSDemos/Demos/Gauges/UpdateLinearGaugeDataAtRuntime/Angular/app/app.service.ts b/JSDemos/Demos/Gauges/UpdateLinearGaugeDataAtRuntime/Angular/app/app.service.ts
index 770420e2c8a..20f65660181 100644
--- a/JSDemos/Demos/Gauges/UpdateLinearGaugeDataAtRuntime/Angular/app/app.service.ts
+++ b/JSDemos/Demos/Gauges/UpdateLinearGaugeDataAtRuntime/Angular/app/app.service.ts
@@ -7,7 +7,7 @@ export class City {
 
   id: string;
 
-  data: any;
+  data: Record<string, number>;
 }
 
 const cities: City[] = [{
diff --git a/JSDemos/Demos/Gauges/ValueIndicatorsAPI/Angular/app/app.component.ts b/JSDemos/Demos/Gauges/ValueIndicatorsAPI/Angular/app/app.component.ts
index e6c568efae1..cb433b613f8 100644
--- a/JSDemos/Demos/Gauges/ValueIndicatorsAPI/Angular/app/app.component.ts
+++ b/JSDemos/Demos/Gauges/ValueIndicatorsAPI/Angular/app/app.component.ts
@@ -1,7 +1,8 @@
 import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { DxCircularGaugeModule, DxNumberBoxModule, DxButtonModule } from 'devextreme-angular';
+import { DxNumberBoxModule, DxButtonModule } from 'devextreme-angular';
+import { DxCircularGaugeModule, DxCircularGaugeTypes } from 'devextreme-angular/ui/circular-gauge';
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
@@ -15,15 +16,13 @@ if (!/localhost/.test(document.location.host)) {
 export class AppComponent {
   mainGenerator = 34;
 
-  additionalGenerator: number[] = [12, 23];
+  additionalGenerator = [12, 23];
 
   gaugeValue = 34;
 
-  gaugeSubvalues: number[] = [12, 23];
+  gaugeSubvalues = [12, 23];
 
-  customizeText(arg: any) {
-    return `${arg.valueText} kV`;
-  }
+  customizeText: DxCircularGaugeTypes.ScaleLabel['customizeText'] = ({ valueText }) => `${valueText} kV`;
 
   updateValues() {
     this.gaugeValue = this.mainGenerator;
diff --git a/JSDemos/Demos/Gauges/VariableNumberOfSubvalueIndicators/Angular/app/app.component.ts b/JSDemos/Demos/Gauges/VariableNumberOfSubvalueIndicators/Angular/app/app.component.ts
index eb7435b6a26..e86f6dfe18a 100644
--- a/JSDemos/Demos/Gauges/VariableNumberOfSubvalueIndicators/Angular/app/app.component.ts
+++ b/JSDemos/Demos/Gauges/VariableNumberOfSubvalueIndicators/Angular/app/app.component.ts
@@ -1,7 +1,8 @@
 import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { DxLinearGaugeModule, DxSelectBoxModule } from 'devextreme-angular';
+import { DxSelectBoxModule } from 'devextreme-angular';
+import { DxLinearGaugeModule, DxLinearGaugeTypes } from 'devextreme-angular/ui/linear-gauge';
 import { Service, PowerInfo } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {
@@ -24,17 +25,15 @@ export class AppComponent {
     this.currentValue = this.powerInfo[0];
   }
 
-  customizeText(arg: any) {
-    return `${arg.valueText} kW`;
-  }
+  customizeText: DxLinearGaugeTypes.ScaleLabel['customizeText'] = ({ valueText }) => `${valueText} kW`;
+
+  customizeTooltip({ index, valueText }) {
+    let result = `${valueText} kW`;
+
+    result = (index >= 0)
+      ? `Secondary ${index + 1}: ${result}`
+      : `Primary: ${result}`;
 
-  customizeTooltip(arg) {
-    let result = `${arg.valueText} kW`;
-    if (arg.index >= 0) {
-      result = `Secondary ${arg.index + 1}: ${result}`;
-    } else {
-      result = `Primary: ${result}`;
-    }
     return {
       text: result,
     };
diff --git a/JSDemos/Demos/HtmlEditor/OutputFormats/Angular/app/app.component.ts b/JSDemos/Demos/HtmlEditor/OutputFormats/Angular/app/app.component.ts
index ce5a7c8a802..83484135dfa 100644
--- a/JSDemos/Demos/HtmlEditor/OutputFormats/Angular/app/app.component.ts
+++ b/JSDemos/Demos/HtmlEditor/OutputFormats/Angular/app/app.component.ts
@@ -1,17 +1,11 @@
-import {
-  NgModule, ViewChild, Component, enableProdMode,
-} from '@angular/core';
+import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import {
-  DxButtonGroupModule,
-  DxHtmlEditorModule,
-} from 'devextreme-angular';
-
 import 'devextreme/ui/html_editor/converters/markdown';
-
 import prettier from 'prettier/standalone';
 import parserHtml from 'prettier/parser-html';
+import { DxHtmlEditorModule, DxHtmlEditorTypes } from 'devextreme-angular/ui/html-editor';
+import { DxButtonGroupModule, DxButtonGroupTypes } from 'devextreme-angular/ui/button-group';
 import { Service } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {
@@ -28,13 +22,13 @@ if (!/localhost/.test(document.location.host)) {
 export class AppComponent {
   valueContent: string;
 
-  editorValueType = 'html';
+  editorValueType: DxHtmlEditorTypes.MarkupType = 'html';
 
   constructor(service: Service) {
     this.valueContent = service.getMarkup();
   }
 
-  onValueTypeChanged({ addedItems }) {
+  onValueTypeChanged({ addedItems }: DxButtonGroupTypes.SelectionChangedEvent) {
     this.editorValueType = addedItems[0].text.toLowerCase();
   }
 
diff --git a/JSDemos/Demos/HtmlEditor/ToolbarCustomization/Angular/app/app.component.ts b/JSDemos/Demos/HtmlEditor/ToolbarCustomization/Angular/app/app.component.ts
index 2f76826b1c9..9840b45dc89 100644
--- a/JSDemos/Demos/HtmlEditor/ToolbarCustomization/Angular/app/app.component.ts
+++ b/JSDemos/Demos/HtmlEditor/ToolbarCustomization/Angular/app/app.component.ts
@@ -1,15 +1,10 @@
 import {
-  NgModule, ViewChild, Component, enableProdMode,
+  NgModule, Component, enableProdMode,
 } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import {
-  DxHtmlEditorComponent,
-  DxHtmlEditorModule,
-  DxPopupComponent,
-  DxPopupModule,
-} from 'devextreme-angular';
-
+import { DxHtmlEditorModule, DxPopupModule } from 'devextreme-angular';
+import { DxButtonTypes } from 'devextreme-angular/ui/button';
 import { Service } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {
@@ -28,7 +23,7 @@ export class AppComponent {
 
   popupVisible: boolean;
 
-  toolbarButtonOptions :any = {
+  toolbarButtonOptions: DxButtonTypes.Properties = {
     text: 'Show markup',
     stylingMode: 'text',
     onClick: () => this.popupVisible = true,
diff --git a/JSDemos/Demos/List/ItemDragging/Angular/app/app.component.ts b/JSDemos/Demos/List/ItemDragging/Angular/app/app.component.ts
index 9291261a4ed..61b15bda431 100644
--- a/JSDemos/Demos/List/ItemDragging/Angular/app/app.component.ts
+++ b/JSDemos/Demos/List/ItemDragging/Angular/app/app.component.ts
@@ -2,13 +2,15 @@ import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { DxListModule } from 'devextreme-angular';
-
+import { DxSortableTypes } from 'devextreme-angular/ui/sortable';
 import { Task, Service } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
 }
 
+type DxoItemDraggingProperties = DxSortableTypes.Properties;
+
 @Component({
   selector: 'demo-app',
   providers: [Service],
@@ -24,28 +26,24 @@ export class AppComponent {
   constructor(service: Service) {
     this.doingTasks = service.getDoingTasks();
     this.plannedTasks = service.getPlannedTasks();
-
-    this.onAdd = this.onAdd.bind(this);
-    this.onRemove = this.onRemove.bind(this);
-    this.onReorder = this.onReorder.bind(this);
   }
 
-  onDragStart(e) {
+  onDragStart: DxoItemDraggingProperties['onDragStart'] = (e) => {
     e.itemData = e.fromData[e.fromIndex];
-  }
+  };
 
-  onAdd(e) {
+  onAdd: DxoItemDraggingProperties['onAdd'] = (e) => {
     e.toData.splice(e.toIndex, 0, e.itemData);
-  }
+  };
 
-  onRemove(e) {
+  onRemove: DxoItemDraggingProperties['onRemove'] = (e) => {
     e.fromData.splice(e.fromIndex, 1);
-  }
+  };
 
-  onReorder(e) {
-    this.onRemove(e);
-    this.onAdd(e);
-  }
+  onReorder: DxoItemDraggingProperties['onReorder'] = (e) => {
+    this.onRemove(e as DxSortableTypes.RemoveEvent);
+    this.onAdd(e as DxSortableTypes.AddEvent);
+  };
 }
 
 @NgModule({
diff --git a/JSDemos/Demos/List/ListEditingAndAPI/Angular/app/app.component.ts b/JSDemos/Demos/List/ListEditingAndAPI/Angular/app/app.component.ts
index 88b126a3960..89f26010682 100644
--- a/JSDemos/Demos/List/ListEditingAndAPI/Angular/app/app.component.ts
+++ b/JSDemos/Demos/List/ListEditingAndAPI/Angular/app/app.component.ts
@@ -1,8 +1,8 @@
 import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { DxSelectBoxModule, DxCheckBoxModule, DxListModule } from 'devextreme-angular';
-
+import { DxSelectBoxModule, DxCheckBoxModule } from 'devextreme-angular';
+import { DxListModule, DxListTypes } from 'devextreme-angular/ui/list';
 import { Service } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {
@@ -19,7 +19,7 @@ if (!/localhost/.test(document.location.host)) {
 export class AppComponent {
   allowDeletion = false;
 
-  itemDeleteMode = 'toggle';
+  itemDeleteMode: DxListTypes.ItemDeleteMode = 'toggle';
 
   tasks: string[];
 
diff --git a/JSDemos/Demos/List/ListSelection/Angular/app/app.component.ts b/JSDemos/Demos/List/ListSelection/Angular/app/app.component.ts
index c8bb931b09a..1016482688a 100644
--- a/JSDemos/Demos/List/ListSelection/Angular/app/app.component.ts
+++ b/JSDemos/Demos/List/ListSelection/Angular/app/app.component.ts
@@ -1,11 +1,12 @@
 import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { DxSelectBoxModule, DxListModule, DxCheckBoxModule } from 'devextreme-angular';
 import DataSource from 'devextreme/data/data_source';
 import ArrayStore from 'devextreme/data/array_store';
-
-import { Task, Service } from './app.service';
+import { DxSelectBoxModule, DxCheckBoxModule } from 'devextreme-angular';
+import { SingleMultipleAllOrNone } from 'devextreme-angular/common';
+import { DxListModule, DxListTypes } from 'devextreme-angular/ui/list';
+import { Service } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
@@ -21,9 +22,9 @@ if (!/localhost/.test(document.location.host)) {
 export class AppComponent {
   tasks: DataSource;
 
-  selectAllModeValue = 'page';
+  selectAllModeValue: DxListTypes.SelectAllMode = 'page';
 
-  selectionModeValue = 'all';
+  selectionModeValue: SingleMultipleAllOrNone = 'all';
 
   selectByClick = false;
 
diff --git a/JSDemos/Demos/List/WebAPI/Angular/app/app.component.ts b/JSDemos/Demos/List/WebAPI/Angular/app/app.component.ts
index 3506f78181b..edd933a4808 100644
--- a/JSDemos/Demos/List/WebAPI/Angular/app/app.component.ts
+++ b/JSDemos/Demos/List/WebAPI/Angular/app/app.component.ts
@@ -15,21 +15,17 @@ if (!/localhost/.test(document.location.host)) {
   templateUrl: 'app/app.component.html',
 })
 export class AppComponent {
-  listData: any;
-
-  constructor() {
-    this.listData = new DataSource({
-      store: AspNetData.createStore({
-        key: 'ProductID',
-        loadUrl: 'https://js.devexpress.com/Demos/Mvc/api/ListData/Orders',
-      }),
-      sort: 'ProductName',
-      group: 'Category.CategoryName',
-      paginate: true,
-      pageSize: 1,
-      filter: ['UnitPrice', '>', 15],
-    });
-  }
+  listData = new DataSource({
+    store: AspNetData.createStore({
+      key: 'ProductID',
+      loadUrl: 'https://js.devexpress.com/Demos/Mvc/api/ListData/Orders',
+    }),
+    sort: 'ProductName',
+    group: 'Category.CategoryName',
+    paginate: true,
+    pageSize: 1,
+    filter: ['UnitPrice', '>', 15],
+  });
 }
 
 @NgModule({
diff --git a/JSDemos/Demos/LoadPanel/Overview/Angular/app/app.component.ts b/JSDemos/Demos/LoadPanel/Overview/Angular/app/app.component.ts
index ee9f11d84ca..be01ed96867 100644
--- a/JSDemos/Demos/LoadPanel/Overview/Angular/app/app.component.ts
+++ b/JSDemos/Demos/LoadPanel/Overview/Angular/app/app.component.ts
@@ -20,7 +20,7 @@ if (!/localhost/.test(document.location.host)) {
 export class AppComponent {
   employee: Employee;
 
-  employeeInfo: any = {};
+  employeeInfo: Employee | {} = {};
 
   loadingVisible = false;
 
diff --git a/JSDemos/Demos/Lookup/Basics/Angular/app/app.component.ts b/JSDemos/Demos/Lookup/Basics/Angular/app/app.component.ts
index 66ceb45b65e..9f7723a13fb 100644
--- a/JSDemos/Demos/Lookup/Basics/Angular/app/app.component.ts
+++ b/JSDemos/Demos/Lookup/Basics/Angular/app/app.component.ts
@@ -20,7 +20,7 @@ if (!/localhost/.test(document.location.host)) {
 export class AppComponent {
   employees: string[];
 
-  dataSource: any;
+  dataSource: DataSource;
 
   constructor(service: Service) {
     this.dataSource = new DataSource({
diff --git a/JSDemos/Demos/Lookup/EventHandling/Angular/app/app.component.ts b/JSDemos/Demos/Lookup/EventHandling/Angular/app/app.component.ts
index 426fdad563a..ff3ba5df18a 100644
--- a/JSDemos/Demos/Lookup/EventHandling/Angular/app/app.component.ts
+++ b/JSDemos/Demos/Lookup/EventHandling/Angular/app/app.component.ts
@@ -1,8 +1,8 @@
 import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { DxLookupModule, DxSelectBoxModule } from 'devextreme-angular';
-
+import { DxSelectBoxModule } from 'devextreme-angular';
+import { DxLookupModule, DxLookupTypes } from 'devextreme-angular/ui/lookup';
 import { Service, Employee } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {
@@ -18,29 +18,21 @@ if (!/localhost/.test(document.location.host)) {
 export class AppComponent {
   employees: Employee[];
 
-  selectedEmployee: any;
+  selectedEmployee: Employee;
 
-  applyValueMode: string;
+  applyValueMode: DxLookupTypes.ApplyValueMode = 'instantly';
 
-  applyValueModes: string[];
+  applyValueModes: DxLookupTypes.ApplyValueMode[] = ['instantly', 'useButtons'];
 
   constructor(service: Service) {
     this.employees = service.getEmployees();
-    this.applyValueMode = 'instantly';
-    this.applyValueModes = ['instantly', 'useButtons'];
   }
 
-  valueChanged(data) {
-    this.selectedEmployee = data.value;
+  valueChanged({ value }: DxLookupTypes.ValueChangedEvent) {
+    this.selectedEmployee = value;
   }
 
-  getDisplayExpr(item) {
-    if (!item) {
-      return '';
-    }
-
-    return `${item.FirstName} ${item.LastName}`;
-  }
+  getDisplayExpr = ({ FirstName, LastName }: Record<string, string> = {}) => (FirstName ? `${FirstName} ${LastName}` : undefined);
 }
 
 @NgModule({
diff --git a/JSDemos/Demos/Map/Markers/Angular/app/app.service.ts b/JSDemos/Demos/Map/Markers/Angular/app/app.service.ts
index 5b3c7ba255d..aac101532e5 100644
--- a/JSDemos/Demos/Map/Markers/Angular/app/app.service.ts
+++ b/JSDemos/Demos/Map/Markers/Angular/app/app.service.ts
@@ -7,7 +7,7 @@ export class Tooltip {
 }
 
 export class Marker {
-  location: any;
+  location: unknown;
 
   tooltip: Tooltip;
 }
diff --git a/JSDemos/Demos/Map/Routes/Angular/app/app.component.ts b/JSDemos/Demos/Map/Routes/Angular/app/app.component.ts
index e5d94693ff8..71a13c1d1e7 100644
--- a/JSDemos/Demos/Map/Routes/Angular/app/app.component.ts
+++ b/JSDemos/Demos/Map/Routes/Angular/app/app.component.ts
@@ -1,13 +1,10 @@
 import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { DxMapModule, DxSelectBoxModule } from 'devextreme-angular';
-
+import { DxMapModule } from 'devextreme-angular';
+import { DxSelectBoxModule, DxSelectBoxTypes } from 'devextreme-angular/ui/select-box';
 import {
-  Marker,
-  APIKey,
-  Route,
-  Service,
+  Marker, APIKey, Route, Service,
 } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {
@@ -27,23 +24,21 @@ export class AppComponent {
 
   markers: Marker[];
 
-  apiKey: APIKey = {};
+  apiKey: APIKey = { bing: 'Aq3LKP2BOmzWY47TZoT1YdieypN_rB6RY9FqBfx-MDCKjvvWBbT68R51xwbL-AqC' };
 
   constructor(service: Service) {
-    this.apiKey.bing = 'Aq3LKP2BOmzWY47TZoT1YdieypN_rB6RY9FqBfx-MDCKjvvWBbT68R51xwbL-AqC';
-
     this.markers = service.getMarkers();
     this.routes = service.getRoutes();
   }
 
-  setMode(e) {
+  setMode(e: DxSelectBoxTypes.ValueChangedEvent) {
     this.routes = this.routes.map((item) => {
       item.mode = e.value;
       return item;
     });
   }
 
-  selectColor(e) {
+  selectColor(e: DxSelectBoxTypes.ValueChangedEvent) {
     this.routes = this.routes.map((item) => {
       item.color = e.value;
       return item;
diff --git a/JSDemos/Demos/Map/Routes/Angular/app/app.service.ts b/JSDemos/Demos/Map/Routes/Angular/app/app.service.ts
index 81c245c840e..7f6b71f1328 100644
--- a/JSDemos/Demos/Map/Routes/Angular/app/app.service.ts
+++ b/JSDemos/Demos/Map/Routes/Angular/app/app.service.ts
@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 
 export class Marker {
-  location: any;
+  location: unknown;
 }
 
 export type APIKey = {
diff --git a/JSDemos/Demos/Menu/Overview/Angular/app/app.component.ts b/JSDemos/Demos/Menu/Overview/Angular/app/app.component.ts
index 4e03f85c4cf..a7d4a1ff9d6 100644
--- a/JSDemos/Demos/Menu/Overview/Angular/app/app.component.ts
+++ b/JSDemos/Demos/Menu/Overview/Angular/app/app.component.ts
@@ -1,9 +1,8 @@
 import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-import { DxMenuModule, DxSelectBoxModule, DxCheckBoxModule } from 'devextreme-angular';
-
+import { DxSelectBoxModule, DxCheckBoxModule } from 'devextreme-angular';
+import { DxMenuModule, DxMenuTypes } from 'devextreme-angular/ui/menu';
 import { Product, Service } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {
@@ -19,26 +18,24 @@ if (!/localhost/.test(document.location.host)) {
 export class AppComponent {
   products: Product[];
 
-  showSubmenuModes: any;
+  showSubmenuModes = [{
+    name: 'onHover' as DxMenuTypes.SubmenuShowMode,
+    delay: { show: 0, hide: 500 },
+  }, {
+    name: 'onClick' as DxMenuTypes.SubmenuShowMode,
+    delay: { show: 0, hide: 300 },
+  }];
 
-  showFirstSubmenuModes: any;
+  showFirstSubmenuModes = this.showSubmenuModes[1];
 
   currentProduct: Product;
 
   constructor(service: Service) {
     this.products = service.getProducts();
-    this.showSubmenuModes = [{
-      name: 'onHover',
-      delay: { show: 0, hide: 500 },
-    }, {
-      name: 'onClick',
-      delay: { show: 0, hide: 300 },
-    }];
-    this.showFirstSubmenuModes = this.showSubmenuModes[1];
   }
 
-  itemClick(data) {
-    const item = data.itemData;
+  itemClick(data: DxMenuTypes.ItemClickEvent) {
+    const item = data.itemData as Product;
 
     if (item.price) {
       this.currentProduct = item;
diff --git a/JSDemos/Demos/NumberBox/Overview/Angular/app/app.component.ts b/JSDemos/Demos/NumberBox/Overview/Angular/app/app.component.ts
index d1b8f73745a..7d6a0a3ebab 100644
--- a/JSDemos/Demos/NumberBox/Overview/Angular/app/app.component.ts
+++ b/JSDemos/Demos/NumberBox/Overview/Angular/app/app.component.ts
@@ -1,7 +1,7 @@
 import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { DxNumberBoxModule } from 'devextreme-angular';
+import { DxNumberBoxModule, DxNumberBoxTypes } from 'devextreme-angular/ui/number-box';
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
@@ -12,7 +12,7 @@ if (!/localhost/.test(document.location.host)) {
   templateUrl: 'app/app.component.html',
 })
 export class AppComponent {
-  keyDown(e) {
+  keyDown(e: DxNumberBoxTypes.KeyDownEvent) {
     const event = e.event;
     const str = event.key;
     if (/^[.,e]$/.test(str)) {
diff --git a/JSDemos/Demos/PivotGrid/ChartIntegration/Angular/app/app.component.html b/JSDemos/Demos/PivotGrid/ChartIntegration/Angular/app/app.component.html
index bc6412836bd..5ccf72d8b8e 100644
--- a/JSDemos/Demos/PivotGrid/ChartIntegration/Angular/app/app.component.html
+++ b/JSDemos/Demos/PivotGrid/ChartIntegration/Angular/app/app.component.html
@@ -14,7 +14,6 @@
     [allowSortingBySummary]="true"
     [allowFiltering]="true"
     [showBorders]="true"
-    [allowSortingBySummary]="true"
     [showColumnGrandTotals]="false"
     [showRowGrandTotals]="false"
     [showRowTotals]="false"
diff --git a/JSDemos/Demos/PivotGrid/ChartIntegration/Angular/app/app.component.ts b/JSDemos/Demos/PivotGrid/ChartIntegration/Angular/app/app.component.ts
index 3e31a76b798..7ba5d9941fa 100644
--- a/JSDemos/Demos/PivotGrid/ChartIntegration/Angular/app/app.component.ts
+++ b/JSDemos/Demos/PivotGrid/ChartIntegration/Angular/app/app.component.ts
@@ -10,7 +10,7 @@ import {
   DxChartModule,
   DxChartComponent,
 } from 'devextreme-angular';
-import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
+import { Options as DataSourceConfig } from 'devextreme/ui/pivot_grid/data_source';
 import { Service } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {
@@ -28,9 +28,9 @@ export class AppComponent implements AfterViewInit {
 
   @ViewChild(DxChartComponent, { static: false }) chart: DxChartComponent;
 
-  pivotGridDataSource: any;
+  pivotGridDataSource: DataSourceConfig;
 
-  constructor(service: Service, private currencyPipe: CurrencyPipe) {
+  constructor(service: Service) {
     this.customizeTooltip = this.customizeTooltip.bind(this);
 
     this.pivotGridDataSource = {
diff --git a/JSDemos/Demos/PivotGrid/DrillDown/Angular/app/app.component.ts b/JSDemos/Demos/PivotGrid/DrillDown/Angular/app/app.component.ts
index 63528216266..dbb3e4e58ee 100644
--- a/JSDemos/Demos/PivotGrid/DrillDown/Angular/app/app.component.ts
+++ b/JSDemos/Demos/PivotGrid/DrillDown/Angular/app/app.component.ts
@@ -4,13 +4,14 @@ import {
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import {
-  DxPivotGridModule,
   DxDataGridComponent,
   DxDataGridModule,
   DxPopupModule,
   DxTemplateModule,
 } from 'devextreme-angular';
 import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
+import DataSource from 'devextreme/data/data_source';
+import { DxPivotGridModule, DxPivotGridTypes } from 'devextreme-angular/ui/pivot-grid';
 import { Service } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {
@@ -26,9 +27,9 @@ if (!/localhost/.test(document.location.host)) {
 export class AppComponent {
   @ViewChild('drillDownDataGrid') drillDownDataGrid: DxDataGridComponent;
 
-  pivotGridDataSource: any;
+  pivotGridDataSource: PivotGridDataSource;
 
-  drillDownDataSource: any;
+  drillDownDataSource: DataSource;
 
   salesPopupVisible = false;
 
@@ -62,7 +63,7 @@ export class AppComponent {
     });
   }
 
-  onPivotCellClick(e) {
+  onPivotCellClick(e: DxPivotGridTypes.CellClickEvent) {
     if (e.area == 'data') {
       const rowPathLength = e.cell.rowPath.length;
       const rowPathName = e.cell.rowPath[rowPathLength - 1];
diff --git a/JSDemos/Demos/PivotGrid/ExcelJSCellCustomization/Angular/app/app.component.ts b/JSDemos/Demos/PivotGrid/ExcelJSCellCustomization/Angular/app/app.component.ts
index 104542bbd0f..b31ff1c2ea7 100644
--- a/JSDemos/Demos/PivotGrid/ExcelJSCellCustomization/Angular/app/app.component.ts
+++ b/JSDemos/Demos/PivotGrid/ExcelJSCellCustomization/Angular/app/app.component.ts
@@ -1,17 +1,20 @@
 import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { DxPivotGridModule } from 'devextreme-angular';
 import { Workbook } from 'exceljs';
 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.
 import { exportPivotGrid } from 'devextreme/excel_exporter';
+import { Options as DataSourceConfig } from 'devextreme/ui/pivot_grid/data_source';
+import { DxPivotGridModule, DxPivotGridTypes } from 'devextreme-angular/ui/pivot-grid';
 import { Service, Sale } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
 }
 
+type CellData = DxPivotGridTypes.CellPreparedEvent['cell'] & { area?: string };
+
 @Component({
   selector: 'demo-app',
   templateUrl: 'app/app.component.html',
@@ -20,7 +23,7 @@ if (!/localhost/.test(document.location.host)) {
 export class AppComponent {
   sales: Sale[];
 
-  dataSource: any;
+  dataSource: DataSourceConfig;
 
   constructor(service: Service) {
     this.dataSource = {
@@ -50,7 +53,7 @@ export class AppComponent {
     };
   }
 
-  onExporting(e) {
+  onExporting(e: DxPivotGridTypes.ExportingEvent) {
     const workbook = new Workbook();
     const worksheet = workbook.addWorksheet('Sales');
 
@@ -78,30 +81,31 @@ export class AppComponent {
     });
   }
 
-  onCellPrepared({ cell, area, cellElement }) {
-    cell.area = area;
-    if (this.isDataCell(cell) || this.isTotalCell(cell)) {
-      const appearance = this.getConditionalAppearance(cell);
+  onCellPrepared({ cell, area, cellElement }: DxPivotGridTypes.CellPreparedEvent) {
+    const cellData = { ...cell, area };
+
+    if (this.isDataCell(cellData) || this.isTotalCell(cellData)) {
+      const appearance = this.getConditionalAppearance(cellData);
       Object.assign(cellElement.style, this.getCssStyles(appearance));
     }
   }
 
-  isDataCell(cell) {
+  isDataCell(cell: CellData) {
     return (cell.area === 'data' && cell.rowType === 'D' && cell.columnType === 'D');
   }
 
-  isTotalCell(cell) {
+  isTotalCell(cell: CellData) {
     return (cell.type === 'T' || cell.type === 'GT' || cell.rowType === 'T' || cell.rowType === 'GT' || cell.columnType === 'T' || cell.columnType === 'GT');
   }
 
-  getExcelCellFormat({ fill, font, bold }) {
+  getExcelCellFormat({ fill, font, bold }: ReturnType<typeof this.getConditionalAppearance>) {
     return {
       fill: { type: 'pattern', pattern: 'solid', fgColor: { argb: fill } },
       font: { color: { argb: font }, bold },
     };
   }
 
-  getCssStyles({ fill, font, bold }) {
+  getCssStyles({ fill, font, bold }: ReturnType<typeof this.getConditionalAppearance>) {
     return {
       'background-color': `#${fill}`,
       color: `#${font}`,
@@ -109,18 +113,20 @@ export class AppComponent {
     };
   }
 
-  getConditionalAppearance(cell) {
+  getConditionalAppearance(cell: CellData) {
     if (this.isTotalCell(cell)) {
       return { fill: 'F2F2F2', font: '3F3F3F', bold: true };
     }
+
     const { value } = cell;
+
     if (value < 20000) {
       return { font: '9C0006', fill: 'FFC7CE', bold: false };
     }
-    if (value > 50000) {
-      return { font: '006100', fill: 'C6EFCE', bold: false };
-    }
-    return { font: '9C6500', fill: 'FFEB9C', bold: false };
+
+    return (value > 50000)
+      ? { font: '006100', fill: 'C6EFCE', bold: false }
+      : { font: '9C6500', fill: 'FFEB9C', bold: false };
   }
 }
 
diff --git a/JSDemos/Demos/PivotGrid/ExcelJSOverview/Angular/app/app.component.ts b/JSDemos/Demos/PivotGrid/ExcelJSOverview/Angular/app/app.component.ts
index 0152acf58e0..c593022d1f1 100644
--- a/JSDemos/Demos/PivotGrid/ExcelJSOverview/Angular/app/app.component.ts
+++ b/JSDemos/Demos/PivotGrid/ExcelJSOverview/Angular/app/app.component.ts
@@ -1,11 +1,12 @@
 import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { DxPivotGridModule } from 'devextreme-angular';
 import { Workbook } from 'exceljs';
 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.
 import { exportPivotGrid } from 'devextreme/excel_exporter';
+import { Options as DataSourceConfig } from 'devextreme/ui/pivot_grid/data_source';
+import { DxPivotGridModule, DxPivotGridTypes } from 'devextreme-angular/ui/pivot-grid';
 import { Service, Sale } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {
@@ -21,7 +22,7 @@ if (!/localhost/.test(document.location.host)) {
 export class AppComponent {
   sales: Sale[];
 
-  dataSource: any;
+  dataSource: DataSourceConfig;
 
   constructor(service: Service) {
     this.dataSource = {
@@ -52,7 +53,7 @@ export class AppComponent {
     };
   }
 
-  onExporting(e) {
+  onExporting(e: DxPivotGridTypes.ExportingEvent) {
     const workbook = new Workbook();
     const worksheet = workbook.addWorksheet('Sales');
 
diff --git a/JSDemos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Angular/app/app.component.ts b/JSDemos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Angular/app/app.component.ts
index 511ed8e3316..621d62aa10d 100644
--- a/JSDemos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Angular/app/app.component.ts
+++ b/JSDemos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Angular/app/app.component.ts
@@ -1,12 +1,13 @@
 import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { DxPivotGridModule, DxCheckBoxModule } from 'devextreme-angular';
-
+import { DxCheckBoxModule } from 'devextreme-angular';
 import { Workbook, WorksheetViewFrozen } from 'exceljs';
 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.
 import { exportPivotGrid } from 'devextreme/excel_exporter';
+import { Options as DataSourceConfig } from 'devextreme/ui/pivot_grid/data_source';
+import { DxPivotGridModule, DxPivotGridTypes } from 'devextreme-angular/ui/pivot-grid';
 import { Service, Sale } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {
@@ -23,7 +24,7 @@ if (!/localhost/.test(document.location.host)) {
 export class AppComponent {
   sales: Sale[];
 
-  dataSource: any;
+  dataSource: DataSourceConfig;
 
   exportDataFieldHeaders = false;
 
@@ -68,7 +69,7 @@ export class AppComponent {
     };
   }
 
-  onExporting(e) {
+  onExporting(e: DxPivotGridTypes.ExportingEvent) {
     const workbook = new Workbook();
     const worksheet = workbook.addWorksheet('Sales');
 
diff --git a/JSDemos/Demos/PivotGrid/FieldPanel/Angular/app/app.component.ts b/JSDemos/Demos/PivotGrid/FieldPanel/Angular/app/app.component.ts
index a7413f8a3dd..0de2dcf980c 100644
--- a/JSDemos/Demos/PivotGrid/FieldPanel/Angular/app/app.component.ts
+++ b/JSDemos/Demos/PivotGrid/FieldPanel/Angular/app/app.component.ts
@@ -1,8 +1,9 @@
 import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { DxPivotGridModule, DxCheckBoxModule } from 'devextreme-angular';
+import { DxCheckBoxModule } from 'devextreme-angular';
 import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
+import { DxPivotGridModule, DxPivotGridTypes } from 'devextreme-angular/ui/pivot-grid';
 import { Service, Sale } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {
@@ -17,7 +18,7 @@ if (!/localhost/.test(document.location.host)) {
   preserveWhitespaces: true,
 })
 export class AppComponent {
-  pivotGridDataSource: any;
+  pivotGridDataSource: PivotGridDataSource;
 
   showDataFields = true;
 
@@ -57,9 +58,11 @@ export class AppComponent {
     });
   }
 
-  contextMenuPreparing(e) {
+  contextMenuPreparing(e: DxPivotGridTypes.ContextMenuPreparingEvent) {
+    type SourceField = (typeof e.field) & { index: number };
+
     const dataSource = e.component.getDataSource();
-    const sourceField = e.field;
+    const sourceField = e.field as SourceField;
 
     if (sourceField) {
       if (!sourceField.groupName || sourceField.groupIndex === 0) {
@@ -67,8 +70,9 @@ export class AppComponent {
           text: 'Hide field',
           onItemClick() {
             let fieldIndex;
+
             if (sourceField.groupName) {
-              fieldIndex = dataSource.getAreaFields(sourceField.area, true)[sourceField.areaIndex].index;
+              fieldIndex = (dataSource.getAreaFields(sourceField.area, true)[sourceField.areaIndex] as SourceField).index;
             } else {
               fieldIndex = sourceField.index;
             }
diff --git a/JSDemos/Demos/PivotGrid/HeaderFilter/Angular/app/app.component.ts b/JSDemos/Demos/PivotGrid/HeaderFilter/Angular/app/app.component.ts
index cb7206a4f8d..bbd6356efbe 100644
--- a/JSDemos/Demos/PivotGrid/HeaderFilter/Angular/app/app.component.ts
+++ b/JSDemos/Demos/PivotGrid/HeaderFilter/Angular/app/app.component.ts
@@ -16,7 +16,7 @@ if (!/localhost/.test(document.location.host)) {
   preserveWhitespaces: true,
 })
 export class AppComponent {
-  pivotGridDataSource: any;
+  pivotGridDataSource: PivotGridDataSource;
 
   searchEnabled = true;
 
diff --git a/JSDemos/Demos/PivotGrid/IntegratedFieldChooser/Angular/app/app.component.ts b/JSDemos/Demos/PivotGrid/IntegratedFieldChooser/Angular/app/app.component.ts
index 021a741edf2..e4e5780699d 100644
--- a/JSDemos/Demos/PivotGrid/IntegratedFieldChooser/Angular/app/app.component.ts
+++ b/JSDemos/Demos/PivotGrid/IntegratedFieldChooser/Angular/app/app.component.ts
@@ -1,9 +1,9 @@
-import {
-  NgModule, Component, ViewChild, enableProdMode,
-} from '@angular/core';
+import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { DxPivotGridModule, DxSelectBoxModule } from 'devextreme-angular';
+import { DxSelectBoxModule } from 'devextreme-angular';
+import { Options as DataSourceConfig } from 'devextreme/ui/pivot_grid/data_source';
+import { DxPivotGridModule, DxPivotGridTypes } from 'devextreme-angular/ui/pivot-grid';
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
@@ -15,40 +15,33 @@ if (!/localhost/.test(document.location.host)) {
   templateUrl: 'app/app.component.html',
 })
 export class AppComponent {
-  dataSource: any;
-
-  applyChangesModes: any;
-
-  applyChangesMode: any;
-
-  constructor() {
-    this.dataSource = {
-      fields: [
-        { dataField: '[Product].[Category]', area: 'row' },
-        {
-          dataField: '[Product].[Subcategory]',
-          area: 'row',
-          headerFilter: {
-            search: {
-              enabled: true,
-            },
+  dataSource: DataSourceConfig = {
+    fields: [
+      { dataField: '[Product].[Category]', area: 'row' },
+      {
+        dataField: '[Product].[Subcategory]',
+        area: 'row',
+        headerFilter: {
+          search: {
+            enabled: true,
           },
         },
-        { dataField: '[Ship Date].[Calendar Year]', area: 'column' },
-        { dataField: '[Ship Date].[Month of Year]', area: 'column' },
-        { dataField: '[Measures].[Customer Count]', area: 'data' },
-      ],
-      store: {
-        type: 'xmla',
-        url: 'https://demos.devexpress.com/Services/OLAP/msmdpump.dll',
-        catalog: 'Adventure Works DW Standard Edition',
-        cube: 'Adventure Works',
       },
-    };
-
-    this.applyChangesModes = ['instantly', 'onDemand'];
-    this.applyChangesMode = this.applyChangesModes[0];
-  }
+      { dataField: '[Ship Date].[Calendar Year]', area: 'column' },
+      { dataField: '[Ship Date].[Month of Year]', area: 'column' },
+      { dataField: '[Measures].[Customer Count]', area: 'data' },
+    ],
+    store: {
+      type: 'xmla',
+      url: 'https://demos.devexpress.com/Services/OLAP/msmdpump.dll',
+      catalog: 'Adventure Works DW Standard Edition',
+      cube: 'Adventure Works',
+    },
+  };
+
+  applyChangesModes: DxPivotGridTypes.ApplyChangesMode[] = ['instantly', 'onDemand'];
+
+  applyChangesMode = this.applyChangesModes[0];
 }
 
 @NgModule({
diff --git a/JSDemos/Demos/PivotGrid/LayoutCustomization/Angular/app/app.component.ts b/JSDemos/Demos/PivotGrid/LayoutCustomization/Angular/app/app.component.ts
index cc0d98c0029..055f84cbca1 100644
--- a/JSDemos/Demos/PivotGrid/LayoutCustomization/Angular/app/app.component.ts
+++ b/JSDemos/Demos/PivotGrid/LayoutCustomization/Angular/app/app.component.ts
@@ -17,7 +17,7 @@ if (!/localhost/.test(document.location.host)) {
   preserveWhitespaces: true,
 })
 export class AppComponent {
-  pivotGridDataSource: any;
+  pivotGridDataSource: PivotGridDataSource;
 
   showTotalsPrior = false;
 
@@ -26,7 +26,7 @@ export class AppComponent {
   treeHeaderLayout = true;
 
   constructor(service: Service) {
-    this.pivotGridDataSource = {
+    this.pivotGridDataSource = new PivotGridDataSource({
       fields: [{
         caption: 'Region',
         dataField: 'region',
@@ -61,7 +61,7 @@ export class AppComponent {
         area: 'data',
       }],
       store: service.getSales(),
-    };
+    });
   }
 }
 
diff --git a/JSDemos/Demos/PivotGrid/OLAPDataSource/Angular/app/app.component.ts b/JSDemos/Demos/PivotGrid/OLAPDataSource/Angular/app/app.component.ts
index d98c11e5d5e..977c491e336 100644
--- a/JSDemos/Demos/PivotGrid/OLAPDataSource/Angular/app/app.component.ts
+++ b/JSDemos/Demos/PivotGrid/OLAPDataSource/Angular/app/app.component.ts
@@ -1,9 +1,10 @@
 import {
-  NgModule, Component, ViewChild, enableProdMode,
+  NgModule, Component, enableProdMode,
 } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { DxPivotGridModule } from 'devextreme-angular';
+import { Options as DataSourceConfig } from 'devextreme/ui/pivot_grid/data_source';
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
@@ -15,7 +16,7 @@ if (!/localhost/.test(document.location.host)) {
   templateUrl: 'app/app.component.html',
 })
 export class AppComponent {
-  dataSource: any;
+  dataSource: DataSourceConfig;
 
   constructor() {
     this.dataSource = {
diff --git a/JSDemos/Demos/PivotGrid/Overview/Angular/app/app.component.ts b/JSDemos/Demos/PivotGrid/Overview/Angular/app/app.component.ts
index 81b1f82b9cb..f41f6024b78 100644
--- a/JSDemos/Demos/PivotGrid/Overview/Angular/app/app.component.ts
+++ b/JSDemos/Demos/PivotGrid/Overview/Angular/app/app.component.ts
@@ -9,7 +9,7 @@ import {
   DxChartModule,
   DxChartComponent,
 } from 'devextreme-angular';
-import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
+import { Options as DataSourceConfig } from 'devextreme/ui/pivot_grid/data_source';
 import { Service } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {
@@ -27,7 +27,7 @@ export class AppComponent implements AfterViewInit {
 
   @ViewChild(DxChartComponent, { static: false }) chart: DxChartComponent;
 
-  pivotGridDataSource: any;
+  pivotGridDataSource: DataSourceConfig;
 
   constructor(service: Service) {
     this.customizeTooltip = this.customizeTooltip.bind(this);
diff --git a/JSDemos/Demos/PivotGrid/RemoteVirtualScrolling/Angular/app/app.component.ts b/JSDemos/Demos/PivotGrid/RemoteVirtualScrolling/Angular/app/app.component.ts
index 3a35ca22d5c..e6766ca62b1 100644
--- a/JSDemos/Demos/PivotGrid/RemoteVirtualScrolling/Angular/app/app.component.ts
+++ b/JSDemos/Demos/PivotGrid/RemoteVirtualScrolling/Angular/app/app.component.ts
@@ -2,6 +2,7 @@ import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { DxPivotGridModule } from 'devextreme-angular';
+import { Options as DataSourceConfig } from 'devextreme/ui/pivot_grid/data_source';
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
@@ -13,25 +14,21 @@ if (!/localhost/.test(document.location.host)) {
   templateUrl: 'app/app.component.html',
 })
 export class AppComponent {
-  dataSource: any;
-
-  constructor() {
-    this.dataSource = {
-      paginate: true,
-      fields: [
-        { dataField: '[Customer].[Customer]', area: 'row' },
-        { dataField: '[Ship Date].[Calendar Year]', area: 'column' },
-        { dataField: '[Ship Date].[Month of Year]', area: 'column' },
-        { dataField: '[Measures].[Internet Sales Amount]', area: 'data' },
-      ],
-      store: {
-        type: 'xmla',
-        url: 'https://demos.devexpress.com/Services/OLAP/msmdpump.dll',
-        catalog: 'Adventure Works DW Standard Edition',
-        cube: 'Adventure Works',
-      },
-    };
-  }
+  dataSource: DataSourceConfig = {
+    paginate: true,
+    fields: [
+      { dataField: '[Customer].[Customer]', area: 'row' },
+      { dataField: '[Ship Date].[Calendar Year]', area: 'column' },
+      { dataField: '[Ship Date].[Month of Year]', area: 'column' },
+      { dataField: '[Measures].[Internet Sales Amount]', area: 'data' },
+    ],
+    store: {
+      type: 'xmla',
+      url: 'https://demos.devexpress.com/Services/OLAP/msmdpump.dll',
+      catalog: 'Adventure Works DW Standard Edition',
+      cube: 'Adventure Works',
+    },
+  };
 }
 
 @NgModule({
diff --git a/JSDemos/Demos/PivotGrid/RunningTotals/Angular/app/app.component.ts b/JSDemos/Demos/PivotGrid/RunningTotals/Angular/app/app.component.ts
index 8b6dd30817e..cecb046ee23 100644
--- a/JSDemos/Demos/PivotGrid/RunningTotals/Angular/app/app.component.ts
+++ b/JSDemos/Demos/PivotGrid/RunningTotals/Angular/app/app.component.ts
@@ -2,7 +2,7 @@ import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { DxPivotGridModule } from 'devextreme-angular';
-import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
+import { Options as DataSourceConfig } from 'devextreme/ui/pivot_grid/data_source';
 import { Service } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {
@@ -16,10 +16,10 @@ if (!/localhost/.test(document.location.host)) {
   providers: [Service],
 })
 export class AppComponent {
-  pivotGridDataSource: any;
+  pivotGridDataSource: DataSourceConfig;
 
   constructor(service: Service) {
-    this.pivotGridDataSource = new PivotGridDataSource({
+    this.pivotGridDataSource = {
       fields: [{
         caption: 'Region',
         width: 120,
@@ -64,7 +64,7 @@ export class AppComponent {
         allowCrossGroupCalculation: true,
       }],
       store: service.getSales(),
-    });
+    };
   }
 }
 
diff --git a/JSDemos/Demos/PivotGrid/SimpleArray/Angular/app/app.component.ts b/JSDemos/Demos/PivotGrid/SimpleArray/Angular/app/app.component.ts
index 72cdb1e4cf7..de6d1e7285c 100644
--- a/JSDemos/Demos/PivotGrid/SimpleArray/Angular/app/app.component.ts
+++ b/JSDemos/Demos/PivotGrid/SimpleArray/Angular/app/app.component.ts
@@ -4,6 +4,7 @@ import {
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { DxPivotGridModule } from 'devextreme-angular';
+import { Options as DataSourceConfig } from 'devextreme/ui/pivot_grid/data_source';
 import { Service, Sale } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {
@@ -19,7 +20,7 @@ if (!/localhost/.test(document.location.host)) {
 export class AppComponent {
   sales: Sale[];
 
-  dataSource: any;
+  dataSource: DataSourceConfig;
 
   constructor(service: Service) {
     this.dataSource = {
diff --git a/JSDemos/Demos/PivotGrid/StandaloneFieldChooser/Angular/app/app.component.ts b/JSDemos/Demos/PivotGrid/StandaloneFieldChooser/Angular/app/app.component.ts
index 112a54109cc..7d8b55f1683 100644
--- a/JSDemos/Demos/PivotGrid/StandaloneFieldChooser/Angular/app/app.component.ts
+++ b/JSDemos/Demos/PivotGrid/StandaloneFieldChooser/Angular/app/app.component.ts
@@ -2,13 +2,13 @@ import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import {
-  DxPivotGridModule,
   DxPivotGridFieldChooserModule,
   DxRadioGroupModule,
   DxButtonModule,
   DxSelectBoxModule,
 } from 'devextreme-angular';
 import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
+import { DxPivotGridModule, DxPivotGridTypes } from 'devextreme-angular/ui/pivot-grid';
 import { Service, Layout, Sale } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {
@@ -23,17 +23,17 @@ if (!/localhost/.test(document.location.host)) {
   preserveWhitespaces: true,
 })
 export class AppComponent {
-  pivotGridDataSource: any;
+  pivotGridDataSource: PivotGridDataSource;
 
   layouts: Layout[];
 
   layout = 0;
 
-  applyChangesModes: any;
+  applyChangesModes: DxPivotGridTypes.ApplyChangesMode[] = ['instantly', 'onDemand'];
 
-  applyChangesMode: any;
+  applyChangesMode = this.applyChangesModes[0];
 
-  state: any;
+  state: Record<string, unknown>;
 
   constructor(service: Service) {
     this.pivotGridDataSource = new PivotGridDataSource({
@@ -78,16 +78,13 @@ export class AppComponent {
     this.state = this.pivotGridDataSource.state();
 
     this.layouts = service.getLayouts();
-
-    this.applyChangesModes = ['instantly', 'onDemand'];
-    this.applyChangesMode = this.applyChangesModes[0];
   }
 
-  applyClick(data) {
+  applyClick() {
     this.pivotGridDataSource.state(this.state);
   }
 
-  cancelClick(data) {
+  cancelClick() {
     this.state = this.pivotGridDataSource.state();
   }
 }
diff --git a/JSDemos/Demos/PivotGrid/StatePersistence/Angular/app/app.component.ts b/JSDemos/Demos/PivotGrid/StatePersistence/Angular/app/app.component.ts
index 8761163787a..233d37b90a2 100644
--- a/JSDemos/Demos/PivotGrid/StatePersistence/Angular/app/app.component.ts
+++ b/JSDemos/Demos/PivotGrid/StatePersistence/Angular/app/app.component.ts
@@ -1,8 +1,9 @@
 import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { DxPivotGridModule, DxButtonModule } from 'devextreme-angular';
 import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
+import { DxButtonModule } from 'devextreme-angular';
+import { DxPivotGridModule, DxPivotGridTypes } from 'devextreme-angular/ui/pivot-grid';
 import { Service } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {
@@ -16,9 +17,9 @@ if (!/localhost/.test(document.location.host)) {
   providers: [Service],
 })
 export class AppComponent {
-  pivotGridDataSource: any;
+  pivotGridDataSource: PivotGridDataSource;
 
-  summaryDisplayModes: any = [
+  summaryDisplayModes = [
     { text: 'None', value: 'none' },
     { text: 'Absolute Variation', value: 'absoluteVariation' },
     { text: 'Percent Variation', value: 'percentVariation' },
@@ -63,8 +64,9 @@ export class AppComponent {
     });
   }
 
-  prepareContextMenu(e) {
-    const dataSource: any = this.pivotGridDataSource;
+  prepareContextMenu(e: DxPivotGridTypes.ContextMenuPreparingEvent) {
+    const dataSource = this.pivotGridDataSource;
+
     if (e.field !== dataSource.field(4)) { return; }
 
     for (const summaryDisplayMode of this.summaryDisplayModes) {
@@ -73,7 +75,7 @@ export class AppComponent {
       e.items.push({
         text: summaryDisplayMode.text,
         selected: e.field.summaryDisplayMode === summaryDisplayModeValue,
-        onItemClick(args) {
+        onItemClick() {
           let format;
           const caption = summaryDisplayModeValue === 'none' ? 'Total Sales' : 'Relative Sales';
           if (summaryDisplayModeValue === 'none' || summaryDisplayModeValue === 'absoluteVariation') {
diff --git a/JSDemos/Demos/PivotGrid/SummaryDisplayModes/Angular/app/app.component.ts b/JSDemos/Demos/PivotGrid/SummaryDisplayModes/Angular/app/app.component.ts
index e09dd8bc761..1772379af25 100644
--- a/JSDemos/Demos/PivotGrid/SummaryDisplayModes/Angular/app/app.component.ts
+++ b/JSDemos/Demos/PivotGrid/SummaryDisplayModes/Angular/app/app.component.ts
@@ -3,6 +3,7 @@ import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-bro
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { DxPivotGridModule } from 'devextreme-angular';
 import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
+import { DxPivotGridTypes } from 'devextreme-angular/ui/pivot-grid';
 import { Service, Sale } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {
@@ -16,9 +17,9 @@ if (!/localhost/.test(document.location.host)) {
   providers: [Service],
 })
 export class AppComponent {
-  pivotGridDataSource: any;
+  pivotGridDataSource: PivotGridDataSource;
 
-  summaryDisplayModes: any[] = [
+  summaryDisplayModes = [
     { text: 'None', value: 'none' },
     { text: 'Absolute Variation', value: 'absoluteVariation' },
     { text: 'Percent Variation', value: 'percentVariation' },
@@ -61,20 +62,23 @@ export class AppComponent {
     });
   }
 
-  prepareContextMenu(e) {
+  prepareContextMenu(e: DxPivotGridTypes.ContextMenuPreparingEvent) {
+    type SourceField = (typeof e.field) & { index: number };
+
     if (e.field && e.field.dataField === 'amount') {
       this.summaryDisplayModes.forEach((mode) => {
         e.items.push({
           text: mode.text,
           selected: e.field.summaryDisplayMode === mode.value,
           onItemClick: () => {
-            let format;
+            let format: string;
             const caption = mode.value === 'none' ? 'Total Sales' : 'Relative Sales';
+
             if (mode.value === 'none'
                             || mode.value === 'absoluteVariation') {
               format = 'currency';
             }
-            this.pivotGridDataSource.field(e.field.index, {
+            this.pivotGridDataSource.field((e.field as SourceField).index, {
               summaryDisplayMode: mode.value,
               format,
               caption,
diff --git a/JSDemos/Demos/PivotGrid/VirtualScrolling/Angular/app/app.component.ts b/JSDemos/Demos/PivotGrid/VirtualScrolling/Angular/app/app.component.ts
index a42906b108e..36f17139a27 100644
--- a/JSDemos/Demos/PivotGrid/VirtualScrolling/Angular/app/app.component.ts
+++ b/JSDemos/Demos/PivotGrid/VirtualScrolling/Angular/app/app.component.ts
@@ -2,7 +2,7 @@ import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { DxPivotGridModule } from 'devextreme-angular';
-import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
+import { Options as DataSourceConfig } from 'devextreme/ui/pivot_grid/data_source';
 import { Service } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {
@@ -15,7 +15,7 @@ if (!/localhost/.test(document.location.host)) {
   providers: [Service],
 })
 export class AppComponent {
-  pivotGridDataSource: any;
+  pivotGridDataSource: DataSourceConfig;
 
   constructor(service: Service) {
     this.pivotGridDataSource = {
diff --git a/JSDemos/Demos/PivotGrid/WebAPIService/Angular/app/app.component.ts b/JSDemos/Demos/PivotGrid/WebAPIService/Angular/app/app.component.ts
index 0cfc6de1111..4d8cd17a37f 100644
--- a/JSDemos/Demos/PivotGrid/WebAPIService/Angular/app/app.component.ts
+++ b/JSDemos/Demos/PivotGrid/WebAPIService/Angular/app/app.component.ts
@@ -1,9 +1,9 @@
 import {
-  NgModule, Component, enableProdMode, ChangeDetectionStrategy,
+  NgModule, Component, enableProdMode,
 } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
+import { Options as DataSourceConfig } from 'devextreme/ui/pivot_grid/data_source';
 import { DxPivotGridModule } from 'devextreme-angular';
 import * as AspNetData from 'devextreme-aspnet-data-nojquery';
 
@@ -16,69 +16,65 @@ if (!/localhost/.test(document.location.host)) {
   templateUrl: 'app/app.component.html',
 })
 export class AppComponent {
-  dataSource: any;
-
-  constructor() {
-    this.dataSource = {
-      remoteOperations: true,
-      store: AspNetData.createStore({
-        key: 'OrderID',
-        loadUrl: 'https://js.devexpress.com/Demos/WidgetsGalleryDataService/api/Sales/Orders',
-      }),
-      fields: [{
-        caption: 'Category',
-        dataField: 'ProductCategoryName',
-        width: 250,
-        expanded: true,
-        sortBySummaryField: 'SalesAmount',
-        sortBySummaryPath: [],
-        sortOrder: 'desc',
-        area: 'row',
-      }, {
-        caption: 'Subcategory',
-        dataField: 'ProductSubcategoryName',
-        width: 250,
-        sortBySummaryField: 'SalesAmount',
-        sortBySummaryPath: [],
-        sortOrder: 'desc',
-        area: 'row',
-      }, {
-        caption: 'Product',
-        dataField: 'ProductName',
-        area: 'row',
-        sortBySummaryField: 'SalesAmount',
-        sortBySummaryPath: [],
-        sortOrder: 'desc',
-        width: 250,
-      }, {
-        caption: 'Date',
-        dataField: 'DateKey',
-        dataType: 'date',
-        area: 'column',
-      }, {
-        caption: 'Amount',
-        dataField: 'SalesAmount',
-        summaryType: 'sum',
-        format: 'currency',
-        area: 'data',
-      }, {
-        caption: 'Store',
-        dataField: 'StoreName',
-      }, {
-        caption: 'Quantity',
-        dataField: 'SalesQuantity',
-        summaryType: 'sum',
-      }, {
-        caption: 'Unit Price',
-        dataField: 'UnitPrice',
-        format: 'currency',
-        summaryType: 'sum',
-      }, {
-        dataField: 'Id',
-        visible: false,
-      }],
-    };
-  }
+  dataSource: DataSourceConfig = {
+    remoteOperations: true,
+    store: AspNetData.createStore({
+      key: 'OrderID',
+      loadUrl: 'https://js.devexpress.com/Demos/WidgetsGalleryDataService/api/Sales/Orders',
+    }),
+    fields: [{
+      caption: 'Category',
+      dataField: 'ProductCategoryName',
+      width: 250,
+      expanded: true,
+      sortBySummaryField: 'SalesAmount',
+      sortBySummaryPath: [],
+      sortOrder: 'desc',
+      area: 'row',
+    }, {
+      caption: 'Subcategory',
+      dataField: 'ProductSubcategoryName',
+      width: 250,
+      sortBySummaryField: 'SalesAmount',
+      sortBySummaryPath: [],
+      sortOrder: 'desc',
+      area: 'row',
+    }, {
+      caption: 'Product',
+      dataField: 'ProductName',
+      area: 'row',
+      sortBySummaryField: 'SalesAmount',
+      sortBySummaryPath: [],
+      sortOrder: 'desc',
+      width: 250,
+    }, {
+      caption: 'Date',
+      dataField: 'DateKey',
+      dataType: 'date',
+      area: 'column',
+    }, {
+      caption: 'Amount',
+      dataField: 'SalesAmount',
+      summaryType: 'sum',
+      format: 'currency',
+      area: 'data',
+    }, {
+      caption: 'Store',
+      dataField: 'StoreName',
+    }, {
+      caption: 'Quantity',
+      dataField: 'SalesQuantity',
+      summaryType: 'sum',
+    }, {
+      caption: 'Unit Price',
+      dataField: 'UnitPrice',
+      format: 'currency',
+      summaryType: 'sum',
+    }, {
+      dataField: 'Id',
+      visible: false,
+    }],
+  };
 }
 
 @NgModule({
diff --git a/JSDemos/Demos/Popup/Overview/Angular/app/app.component.ts b/JSDemos/Demos/Popup/Overview/Angular/app/app.component.ts
index dc14d051d2c..ec235d87b6f 100644
--- a/JSDemos/Demos/Popup/Overview/Angular/app/app.component.ts
+++ b/JSDemos/Demos/Popup/Overview/Angular/app/app.component.ts
@@ -24,11 +24,11 @@ export class AppComponent {
 
   popupVisible = false;
 
-  moreInfoButtonOptions: any;
+  moreInfoButtonOptions: Record<string, unknown>;
 
-  emailButtonOptions: any;
+  emailButtonOptions: Record<string, unknown>;
 
-  closeButtonOptions: any;
+  closeButtonOptions: Record<string, unknown>;
 
   positionOf: string;
 
@@ -72,11 +72,11 @@ export class AppComponent {
     };
   }
 
-  detailsButtonMouseEnter(id) {
+  detailsButtonMouseEnter(id: number) {
     this.positionOf = `#image${id}`;
   }
 
-  showInfo(employee) {
+  showInfo(employee: Employee) {
     this.currentEmployee = employee;
     this.popupVisible = true;
   }
diff --git a/JSDemos/Demos/Popup/Scrolling/Angular/app/app.component.ts b/JSDemos/Demos/Popup/Scrolling/Angular/app/app.component.ts
index f1c26ddd44b..5c6af44c86d 100644
--- a/JSDemos/Demos/Popup/Scrolling/Angular/app/app.component.ts
+++ b/JSDemos/Demos/Popup/Scrolling/Angular/app/app.component.ts
@@ -1,10 +1,8 @@
 import { Component, NgModule, enableProdMode } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-import {
-  DxPopupModule, DxButtonModule, DxScrollViewModule, DxTemplateModule,
-} from 'devextreme-angular';
+import { DxPopupModule, DxScrollViewModule, DxTemplateModule } from 'devextreme-angular';
+import { DxButtonModule, DxButtonTypes } from 'devextreme-angular/ui/button';
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
@@ -21,7 +19,16 @@ export class AppComponent {
 
   popupWithScrollViewVisible = false;
 
-  bookButtonOptions: any;
+  bookButtonOptions: DxButtonTypes.Properties = {
+    width: 300,
+    text: 'Book',
+    type: 'default',
+    stylingMode: 'contained',
+    onClick: () => {
+      this.popupVisible = false;
+      this.popupWithScrollViewVisible = false;
+    },
+  };
 
   showPopup() {
     this.popupVisible = true;
@@ -30,19 +37,6 @@ export class AppComponent {
   showPopupWithScrollView() {
     this.popupWithScrollViewVisible = true;
   }
-
-  constructor() {
-    this.bookButtonOptions = {
-      width: 300,
-      text: 'Book',
-      type: 'default',
-      stylingMode: 'contained',
-      onClick: () => {
-        this.popupVisible = false;
-        this.popupWithScrollViewVisible = false;
-      },
-    };
-  }
 }
 
 @NgModule({
diff --git a/JSDemos/Demos/RadioGroup/Overview/Angular/app/app.component.ts b/JSDemos/Demos/RadioGroup/Overview/Angular/app/app.component.ts
index eb01b5aa565..47c488c82b8 100644
--- a/JSDemos/Demos/RadioGroup/Overview/Angular/app/app.component.ts
+++ b/JSDemos/Demos/RadioGroup/Overview/Angular/app/app.component.ts
@@ -2,7 +2,7 @@ import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { DxRadioGroupModule, DxTemplateModule } from 'devextreme-angular';
-
+import { DxRadioGroupTypes } from 'devextreme-angular/ui/radio-group';
 import { PriorityEntity, Service, Task } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {
@@ -16,8 +16,6 @@ if (!/localhost/.test(document.location.host)) {
   styleUrls: ['app/app.component.css'],
 })
 export class AppComponent {
-  priorities: string[];
-
   priorityEntities: PriorityEntity[];
 
   selectionPriorityId: number;
@@ -28,25 +26,26 @@ export class AppComponent {
 
   currentData: string[] = [];
 
+  priorities = [
+    'Low',
+    'Normal',
+    'Urgent',
+    'High',
+  ];
+
   constructor(service: Service) {
     this.tasks = service.getTasks();
-    this.priorities = [
-      'Low',
-      'Normal',
-      'Urgent',
-      'High',
-    ];
     this.priorityEntities = service.getPriorityEntities();
     this.colorPriority = this.priorities[2];
     this.currentData[0] = this.tasks[1].subject;
     this.selectionPriorityId = this.priorityEntities[0].id;
   }
 
-  onValueChanged($event) {
+  onValueChanged({ value }: DxRadioGroupTypes.ValueChangedEvent) {
     this.currentData = [];
 
     this.tasks.forEach((item, index) => {
-      if (item.priority == $event.value) {
+      if (item.priority == value) {
         this.currentData.push(this.tasks[index].subject);
       }
     });
diff --git a/JSDemos/Demos/RangeSelector/ChartOnBackground/Angular/app/app.component.ts b/JSDemos/Demos/RangeSelector/ChartOnBackground/Angular/app/app.component.ts
index af6b80f2107..3154125b600 100644
--- a/JSDemos/Demos/RangeSelector/ChartOnBackground/Angular/app/app.component.ts
+++ b/JSDemos/Demos/RangeSelector/ChartOnBackground/Angular/app/app.component.ts
@@ -13,24 +13,20 @@ if (!/localhost/.test(document.location.host)) {
   styleUrls: ['app/app.component.css'],
 })
 export class AppComponent {
-  dataSource: any[];
+  dataSource = [
+    { t: new Date(2011, 11, 22), costs: 19, income: 18 },
+    { t: new Date(2011, 11, 29), costs: 27, income: 12 },
+    { t: new Date(2012, 0, 5), costs: 30, income: 5 },
+    { t: new Date(2012, 0, 12), costs: 26, income: 6 },
+    { t: new Date(2012, 0, 19), costs: 18, income: 10 },
+    { t: new Date(2012, 0, 26), costs: 15, income: 15 },
+    { t: new Date(2012, 1, 2), costs: 14, income: 21 },
+    { t: new Date(2012, 1, 9), costs: 14, income: 25 },
+  ];
 
   startSelectedValue: Date = new Date(2011, 11, 25);
 
   endSelectedValue: Date = new Date(2012, 0, 1);
-
-  constructor() {
-    this.dataSource = [
-      { t: new Date(2011, 11, 22), costs: 19, income: 18 },
-      { t: new Date(2011, 11, 29), costs: 27, income: 12 },
-      { t: new Date(2012, 0, 5), costs: 30, income: 5 },
-      { t: new Date(2012, 0, 12), costs: 26, income: 6 },
-      { t: new Date(2012, 0, 19), costs: 18, income: 10 },
-      { t: new Date(2012, 0, 26), costs: 15, income: 15 },
-      { t: new Date(2012, 1, 2), costs: 14, income: 21 },
-      { t: new Date(2012, 1, 9), costs: 14, income: 25 },
-    ];
-  }
 }
 
 @NgModule({
diff --git a/JSDemos/Demos/RangeSelector/CustomizedChartOnBackground/Angular/app/app.component.ts b/JSDemos/Demos/RangeSelector/CustomizedChartOnBackground/Angular/app/app.component.ts
index 538021e64e2..360ac8a8266 100644
--- a/JSDemos/Demos/RangeSelector/CustomizedChartOnBackground/Angular/app/app.component.ts
+++ b/JSDemos/Demos/RangeSelector/CustomizedChartOnBackground/Angular/app/app.component.ts
@@ -13,33 +13,27 @@ if (!/localhost/.test(document.location.host)) {
   styleUrls: ['app/app.component.css'],
 })
 export class AppComponent {
-  dataSource: any[];
+  dataSource = [
+    { x: 0, y: 15 },
+    { x: 1, y: -1 },
+    { x: 2, y: 10 },
+    { x: 3, y: -3 },
+    { x: 4, y: 16 },
+    { x: 5, y: 0 },
+    { x: 6, y: 9 },
+    { x: 7, y: 3 },
+    { x: 8, y: 15 },
+    { x: 9, y: -1 },
+    { x: 10, y: 10 },
+    { x: 11, y: -3 },
+    { x: 12, y: 16 },
+    { x: 13, y: 0 },
+    { x: 14, y: 9 },
+    { x: 15, y: 3 },
+    { x: 16, y: 13 },
+  ];
 
-  constructor() {
-    this.dataSource = [
-      { x: 0, y: 15 },
-      { x: 1, y: -1 },
-      { x: 2, y: 10 },
-      { x: 3, y: -3 },
-      { x: 4, y: 16 },
-      { x: 5, y: 0 },
-      { x: 6, y: 9 },
-      { x: 7, y: 3 },
-      { x: 8, y: 15 },
-      { x: 9, y: -1 },
-      { x: 10, y: 10 },
-      { x: 11, y: -3 },
-      { x: 12, y: 16 },
-      { x: 13, y: 0 },
-      { x: 14, y: 9 },
-      { x: 15, y: 3 },
-      { x: 16, y: 13 },
-    ];
-  }
-
-  customizeText(value) {
-    return `${value.valueText} s`;
-  }
+  customizeText = ({ valueText }) => `${valueText} s`;
 }
 
 @NgModule({
diff --git a/JSDemos/Demos/RangeSelector/DiscreteScale/Angular/app/app.component.ts b/JSDemos/Demos/RangeSelector/DiscreteScale/Angular/app/app.component.ts
index 00611916c11..04c2d6d9b20 100644
--- a/JSDemos/Demos/RangeSelector/DiscreteScale/Angular/app/app.component.ts
+++ b/JSDemos/Demos/RangeSelector/DiscreteScale/Angular/app/app.component.ts
@@ -1,8 +1,7 @@
 import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { DxRangeSelectorModule } from 'devextreme-angular';
-
+import { DxRangeSelectorModule, DxRangeSelectorTypes } from 'devextreme-angular/ui/range-selector';
 import { Service, ProductionData } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {
@@ -24,7 +23,7 @@ export class AppComponent {
     this.dataSource = service.getData();
   }
 
-  onValueChanged(e) {
+  onValueChanged(e: DxRangeSelectorTypes.ValueChangedEvent) {
     const data = this.dataSource;
     let total = 0;
     let startIndex;
diff --git a/JSDemos/Demos/RangeSelector/LogarithmicScale/Angular/app/app.component.ts b/JSDemos/Demos/RangeSelector/LogarithmicScale/Angular/app/app.component.ts
index 20da2b3c9b8..fd53181b8cd 100644
--- a/JSDemos/Demos/RangeSelector/LogarithmicScale/Angular/app/app.component.ts
+++ b/JSDemos/Demos/RangeSelector/LogarithmicScale/Angular/app/app.component.ts
@@ -1,9 +1,8 @@
-import {
-  NgModule, Component, ViewChild, enableProdMode,
-} from '@angular/core';
+import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { DxRangeSelectorModule, DxChartModule } from 'devextreme-angular';
+import { DxRangeSelectorModule } from 'devextreme-angular';
+import { DxChartModule, DxChartTypes } from 'devextreme-angular/ui/chart';
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
@@ -15,9 +14,9 @@ if (!/localhost/.test(document.location.host)) {
   styleUrls: ['app/app.component.css'],
 })
 export class AppComponent {
-  dataSource: any[] = [];
+  dataSource: Record<string, unknown>[] = [];
 
-  visualRange: any = {};
+  visualRange: DxChartTypes.ArgumentAxis['visualRange'] = {};
 
   constructor() {
     const max = 100;
diff --git a/JSDemos/Demos/RangeSelector/UseRangeSelectionForCalculation/Angular/app/app.component.ts b/JSDemos/Demos/RangeSelector/UseRangeSelectionForCalculation/Angular/app/app.component.ts
index f49f3bd25ce..a1a45d90d6d 100644
--- a/JSDemos/Demos/RangeSelector/UseRangeSelectionForCalculation/Angular/app/app.component.ts
+++ b/JSDemos/Demos/RangeSelector/UseRangeSelectionForCalculation/Angular/app/app.component.ts
@@ -2,7 +2,8 @@ import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { DatePipe } from '@angular/common';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { DxRangeSelectorModule, DxSelectBoxModule } from 'devextreme-angular';
+import { DxSelectBoxModule } from 'devextreme-angular';
+import { DxRangeSelectorModule, DxRangeSelectorTypes } from 'devextreme-angular/ui/range-selector';
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
@@ -15,17 +16,17 @@ if (!/localhost/.test(document.location.host)) {
   preserveWhitespaces: true,
 })
 export class AppComponent {
-  pipe: any = new DatePipe('en-US');
+  pipe = new DatePipe('en-US');
 
-  dataSource: string[] = ['onHandleMove', 'onHandleRelease'];
+  dataSource = ['onHandleMove', 'onHandleRelease'];
 
   workingDaysCount = 260;
 
-  startValue: Date = new Date(2011, 0, 1);
+  startValue = new Date(2011, 0, 1);
 
-  endValue: Date = new Date(2011, 11, 31);
+  endValue = new Date(2011, 11, 31);
 
-  onValueChanged = (e) => {
+  onValueChanged = (e: DxRangeSelectorTypes.ValueChangedEvent) => {
     const currentDate = new Date(e.value[0]);
     let workingDaysCount = 0;
 
@@ -38,9 +39,9 @@ export class AppComponent {
     this.workingDaysCount = workingDaysCount;
   };
 
-  customizeSliderMarker = (data) => this.pipe.transform(data.value, 'dd EEEE');
+  customizeSliderMarker: DxRangeSelectorTypes.Properties['sliderMarker']['customizeText'] = ({ value }) => this.pipe.transform(value, 'dd EEEE');
 
-  customizeLabel = (data) => this.pipe.transform(data.value, 'MMM');
+  customizeLabel: DxRangeSelectorTypes.Properties['scale']['label']['customizeText'] = ({ value }) => this.pipe.transform(value, 'MMM');
 }
 
 @NgModule({
diff --git a/JSDemos/Demos/RangeSelector/UseRangeSelectionForFiltering/Angular/app/app.component.ts b/JSDemos/Demos/RangeSelector/UseRangeSelectionForFiltering/Angular/app/app.component.ts
index 3cf0b87dd2e..7bbc8a42231 100644
--- a/JSDemos/Demos/RangeSelector/UseRangeSelectionForFiltering/Angular/app/app.component.ts
+++ b/JSDemos/Demos/RangeSelector/UseRangeSelectionForFiltering/Angular/app/app.component.ts
@@ -1,8 +1,8 @@
 import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { DxRangeSelectorModule, DxDataGridModule } from 'devextreme-angular';
-
+import { DxDataGridModule } from 'devextreme-angular';
+import { DxRangeSelectorModule, DxRangeSelectorTypes } from 'devextreme-angular/ui/range-selector';
 import { Service, Employee } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {
@@ -20,23 +20,19 @@ export class AppComponent {
 
   selectedEmployees: Employee[];
 
-  tableTitles: string[] = ['First Name', 'Last Name', 'Birth Year', 'City', 'Title'];
-
   constructor(service: Service) {
     this.employees = service.getEmployees();
     this.selectedEmployees = this.employees;
   }
 
-  onValueChanged(e) {
-    const selectedEmployees: any[] = [];
-
-    this.employees.forEach((item, index) => {
-      if (item.BirthYear >= e.value[0] && item.BirthYear <= e.value[1]) {
-        selectedEmployees.push(item);
-      }
-    });
-
-    this.selectedEmployees = selectedEmployees;
+  onValueChanged(e: DxRangeSelectorTypes.ValueChangedEvent) {
+    this.selectedEmployees = this.employees.map(
+      (item, index) => (
+        (item.BirthYear >= (e.value[0] as number) && item.BirthYear <= (e.value[1] as number))
+          ? item
+          : undefined
+      ),
+    ).filter(Boolean);
   }
 }
 
diff --git a/JSDemos/Demos/RangeSlider/Overview/Angular/app/app.component.ts b/JSDemos/Demos/RangeSlider/Overview/Angular/app/app.component.ts
index 6b61988c73d..14e9e005db6 100644
--- a/JSDemos/Demos/RangeSlider/Overview/Angular/app/app.component.ts
+++ b/JSDemos/Demos/RangeSlider/Overview/Angular/app/app.component.ts
@@ -1,6 +1,4 @@
-import {
-  NgModule, Component, ViewChild, enableProdMode,
-} from '@angular/core';
+import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { DxRangeSliderModule, DxNumberBoxModule } from 'devextreme-angular';