diff --git a/apps/demos/Demos/Autocomplete/Overview/Angular/app/app.component.html b/apps/demos/Demos/Autocomplete/Overview/Angular/app/app.component.html
index 5d91ba68a4b8..9caf4b4e678e 100644
--- a/apps/demos/Demos/Autocomplete/Overview/Angular/app/app.component.html
+++ b/apps/demos/Demos/Autocomplete/Overview/Angular/app/app.component.html
@@ -8,7 +8,7 @@
placeholder="Type first name..."
[(value)]="firstName"
[dataSource]="names"
- (onValueChanged)="updateEmployeeInfo($event)"
+ (onValueChanged)="updateEmployeeInfo()"
>
@@ -24,7 +24,7 @@
[showClearButton]="true"
[dataSource]="surnames"
[(value)]="lastName"
- (onValueChanged)="updateEmployeeInfo($event)"
+ (onValueChanged)="updateEmployeeInfo()"
>
@@ -57,7 +57,7 @@
valueExpr="State_Long"
[dataSource]="states"
[(value)]="state"
- (onValueChanged)="updateEmployeeInfo($event)"
+ (onValueChanged)="updateEmployeeInfo()"
>
{{ item.State_Long }} ({{ item.State_Short }})
@@ -78,7 +78,7 @@
valueExpr="Text"
[dataSource]="clientsStore"
[(value)]="currentClient"
- (onValueChanged)="updateEmployeeInfo($event)"
+ (onValueChanged)="updateEmployeeInfo()"
>
diff --git a/apps/demos/Demos/Charts/FunnelChart/Angular/app/app.component.html b/apps/demos/Demos/Charts/FunnelChart/Angular/app/app.component.html
index b3ba3bb8472c..c7ca11bf9262 100644
--- a/apps/demos/Demos/Charts/FunnelChart/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/FunnelChart/Angular/app/app.component.html
@@ -9,7 +9,7 @@
-
+
diff --git a/apps/demos/Demos/FileUploader/CustomDropzone/Angular/app/app.component.html b/apps/demos/Demos/FileUploader/CustomDropzone/Angular/app/app.component.html
index 87324aa4592b..2a0ea39cd747 100644
--- a/apps/demos/Demos/FileUploader/CustomDropzone/Angular/app/app.component.html
+++ b/apps/demos/Demos/FileUploader/CustomDropzone/Angular/app/app.component.html
@@ -33,6 +33,6 @@
(onDropZoneLeave)="onDropZoneLeave($event)"
(onUploaded)="onUploaded($event)"
(onProgress)="onProgress($event)"
- (onUploadStarted)="onUploadStarted($event)"
+ (onUploadStarted)="onUploadStarted()"
>
diff --git a/apps/demos/Demos/FilterBuilder/WithList/Angular/app/app.component.html b/apps/demos/Demos/FilterBuilder/WithList/Angular/app/app.component.html
index 2920d0aa0fa6..38e4515682fb 100644
--- a/apps/demos/Demos/FilterBuilder/WithList/Angular/app/app.component.html
+++ b/apps/demos/Demos/FilterBuilder/WithList/Angular/app/app.component.html
@@ -2,7 +2,6 @@
diff --git a/apps/demos/Demos/Gallery/Overview/Angular/app/app.component.ts b/apps/demos/Demos/Gallery/Overview/Angular/app/app.component.ts
index 78d73df7c99e..9672b9f16c9f 100644
--- a/apps/demos/Demos/Gallery/Overview/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Gallery/Overview/Angular/app/app.component.ts
@@ -3,7 +3,7 @@ import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { DxGalleryModule } from 'devextreme-angular';
import { DxCheckBoxModule, DxCheckBoxTypes } from 'devextreme-angular/ui/check-box';
-import { Service } from './app.service';
+import { Service, Image } from './app.service';
if (!/localhost/.test(document.location.host)) {
enableProdMode();
@@ -22,7 +22,7 @@ if (window && window.config.packageConfigPaths) {
styleUrls: [`.${modulePrefix}/app.component.css`],
})
export class AppComponent {
- dataSource: string[];
+ dataSource: Image[];
slideshowDelay = 2000;
diff --git a/apps/demos/Demos/Gallery/Overview/Angular/app/app.service.ts b/apps/demos/Demos/Gallery/Overview/Angular/app/app.service.ts
index e2832938b071..6e6535832c44 100644
--- a/apps/demos/Demos/Gallery/Overview/Angular/app/app.service.ts
+++ b/apps/demos/Demos/Gallery/Overview/Angular/app/app.service.ts
@@ -1,6 +1,6 @@
import { Injectable } from '@angular/core';
-interface Image {
+export interface Image {
imageAlt: string,
imageSrc: string,
}
diff --git a/apps/demos/Demos/Gantt/ChartAppearance/Angular/app/app.component.ts b/apps/demos/Demos/Gantt/ChartAppearance/Angular/app/app.component.ts
index 865f7fd7a3ad..83367f66f791 100644
--- a/apps/demos/Demos/Gantt/ChartAppearance/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Gantt/ChartAppearance/Angular/app/app.component.ts
@@ -1,5 +1,4 @@
-import { ViewEncapsulation } from '@angular/compiler';
-import { NgModule, Component, enableProdMode } from '@angular/core';
+import { NgModule, Component, enableProdMode, ViewEncapsulation } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { DxCheckBoxModule, DxSelectBoxModule, DxDateBoxModule } from 'devextreme-angular';
diff --git a/apps/demos/Demos/Gantt/TaskTemplate/Angular/app/app.component.ts b/apps/demos/Demos/Gantt/TaskTemplate/Angular/app/app.component.ts
index 6f1999dce81a..175c134c1907 100644
--- a/apps/demos/Demos/Gantt/TaskTemplate/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Gantt/TaskTemplate/Angular/app/app.component.ts
@@ -1,5 +1,4 @@
-import { ViewEncapsulation } from '@angular/compiler';
-import { NgModule, Component, enableProdMode } from '@angular/core';
+import { NgModule, Component, enableProdMode, ViewEncapsulation } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { DxGanttModule, DxCheckBoxModule, DxSelectBoxModule } from 'devextreme-angular';
diff --git a/apps/demos/Demos/Gantt/Toolbar/Angular/app/app.component.html b/apps/demos/Demos/Gantt/Toolbar/Angular/app/app.component.html
index 004a61075d64..49a820aff211 100644
--- a/apps/demos/Demos/Gantt/Toolbar/Angular/app/app.component.html
+++ b/apps/demos/Demos/Gantt/Toolbar/Angular/app/app.component.html
@@ -37,7 +37,7 @@
- Birth date: {{ employeeInfo.Birth_Date }}
+ Birth date: {{ employeeInfo?.Birth_Date }}
Address:
{{ employeeInfo.City }}
- {{ employeeInfo.Zipcode }}
- {{ employeeInfo.Address }}
+ {{ employeeInfo?.Zipcode }}
+ {{ employeeInfo?.Address }}
Phone:
- {{ employeeInfo.Mobile_Phone }}{{ employeeInfo?.Mobile_Phone }}
- Email: {{ employeeInfo.Email }}
+ Email: {{ employeeInfo?.Email }}
diff --git a/apps/demos/Demos/LoadPanel/Overview/Angular/app/app.component.ts b/apps/demos/Demos/LoadPanel/Overview/Angular/app/app.component.ts
index cab923b29468..760de55aea22 100644
--- a/apps/demos/Demos/LoadPanel/Overview/Angular/app/app.component.ts
+++ b/apps/demos/Demos/LoadPanel/Overview/Angular/app/app.component.ts
@@ -26,7 +26,7 @@ if (window && window.config.packageConfigPaths) {
export class AppComponent {
employee: Employee;
- employeeInfo: Employee | {} = {};
+ employeeInfo = new Employee();
loadingVisible = false;
@@ -45,7 +45,7 @@ export class AppComponent {
}
showLoadPanel() {
- this.employeeInfo = {};
+ this.employeeInfo = new Employee();
this.loadingVisible = true;
}
}
diff --git a/apps/demos/Demos/Menu/Scrolling/Angular/app/app.component.ts b/apps/demos/Demos/Menu/Scrolling/Angular/app/app.component.ts
index df9c11c12ec4..3348282b997f 100644
--- a/apps/demos/Demos/Menu/Scrolling/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Menu/Scrolling/Angular/app/app.component.ts
@@ -2,7 +2,7 @@ import { NgModule, Component, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { DxCheckBoxModule } from 'devextreme-angular';
-import { DxMenuModule } from 'devextreme-angular/ui/menu';
+import { DxMenuModule, DxMenuTypes } from 'devextreme-angular/ui/menu';
import notify from 'devextreme/ui/notify';
import { Product, Service } from './app.service';
@@ -33,13 +33,13 @@ export class AppComponent {
this.products = service.getProducts();
}
- itemClick(e: ItemClickEvent) {
+ itemClick(e: DxMenuTypes.ItemClickEvent) {
if (!e.itemData.items) {
notify(`The "${e.itemData.text}" item was clicked`, 'success', 1500);
}
}
- onSubmenuShowing({ submenuContainer }: HTMLElement) {
+ onSubmenuShowing({ submenuContainer }: DxMenuTypes.SubmenuShowingEvent) {
submenuContainer.style.maxHeight = this.limitSubmenuHeight ? `${this.SUBMENU_HEIGHT}px` : '';
}
}
diff --git a/apps/demos/Demos/Popup/Scrolling/Angular/app/app.component.html b/apps/demos/Demos/Popup/Scrolling/Angular/app/app.component.html
index 7b2ea8f60893..dd66dbaf138c 100644
--- a/apps/demos/Demos/Popup/Scrolling/Angular/app/app.component.html
+++ b/apps/demos/Demos/Popup/Scrolling/Angular/app/app.component.html
@@ -4,7 +4,7 @@
text="Show Popup"
type="default"
[width]="300"
- (onClick)="showPopup($event)"
+ (onClick)="showPopup()"
>
A native scrollable container
@@ -14,7 +14,7 @@
The ScrollView
diff --git a/apps/demos/Demos/RangeSelector/ImageOnBackground/Angular/app/app.component.html b/apps/demos/Demos/RangeSelector/ImageOnBackground/Angular/app/app.component.html
index df9e3db50ddc..1249bfc009fd 100644
--- a/apps/demos/Demos/RangeSelector/ImageOnBackground/Angular/app/app.component.html
+++ b/apps/demos/Demos/RangeSelector/ImageOnBackground/Angular/app/app.component.html
@@ -17,10 +17,10 @@
[endValue]="endValue"
[placeholderHeight]="20"
>
-
+
-
+
diff --git a/apps/demos/Demos/Scheduler/Adaptability/Angular/app/app.component.html b/apps/demos/Demos/Scheduler/Adaptability/Angular/app/app.component.html
index f2b968b531fc..3e49ca7f582c 100644
--- a/apps/demos/Demos/Scheduler/Adaptability/Angular/app/app.component.html
+++ b/apps/demos/Demos/Scheduler/Adaptability/Angular/app/app.component.html
@@ -19,6 +19,6 @@
diff --git a/apps/demos/Demos/Scheduler/CellTemplates/Angular/app/app.component.ts b/apps/demos/Demos/Scheduler/CellTemplates/Angular/app/app.component.ts
index 20101e3397a8..374be92cffc9 100644
--- a/apps/demos/Demos/Scheduler/CellTemplates/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Scheduler/CellTemplates/Angular/app/app.component.ts
@@ -34,9 +34,9 @@ if (window && window.config.packageConfigPaths) {
export class AppComponent {
dataSource: DataSource;
- dinnerTime = this.dataService.getDinnerTime();
+ dinnerTime: { from: number, to: number };
- holidays = this.dataService.getHolidays();
+ holidays: Date[];
currentDate = new Date(2021, 3, 27);
@@ -45,6 +45,8 @@ export class AppComponent {
currentView = this.views[0];
constructor(public dataService: DataService) {
+ this.dinnerTime = this.dataService.getDinnerTime();
+ this.holidays = this.dataService.getHolidays();
this.dataSource = new DataSource({
store: dataService.getData(),
});
diff --git a/apps/demos/Demos/Scheduler/IncreaseViewDuration/Angular/app/app.component.html b/apps/demos/Demos/Scheduler/IncreaseViewDuration/Angular/app/app.component.html
index 1f2ceb3cf6a7..cda79a21387e 100644
--- a/apps/demos/Demos/Scheduler/IncreaseViewDuration/Angular/app/app.component.html
+++ b/apps/demos/Demos/Scheduler/IncreaseViewDuration/Angular/app/app.component.html
@@ -1,7 +1,6 @@
-
-
+
+
diff --git a/apps/demos/Demos/Toast/Stack/Angular/app/app.component.ts b/apps/demos/Demos/Toast/Stack/Angular/app/app.component.ts
index c22913895e0b..21e56a718627 100644
--- a/apps/demos/Demos/Toast/Stack/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Toast/Stack/Angular/app/app.component.ts
@@ -48,7 +48,7 @@ export class AppComponent {
predefinedPosition: Position = 'bottom center';
- coordinatePosition: Position = {
+ coordinatePosition = {
top: undefined,
bottom: undefined,
left: undefined,
diff --git a/apps/demos/Demos/Toolbar/Adaptability/Angular/app/app.component.ts b/apps/demos/Demos/Toolbar/Adaptability/Angular/app/app.component.ts
index d5fc571a5cf8..5f703626a038 100644
--- a/apps/demos/Demos/Toolbar/Adaptability/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Toolbar/Adaptability/Angular/app/app.component.ts
@@ -1,4 +1,4 @@
-import { NgModule, Component, enableProdMode } from '@angular/core';
+import { NgModule, Component, enableProdMode, inject } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import {
@@ -43,31 +43,33 @@ if (window && window.config.packageConfigPaths) {
})
export class AppComponent {
- stylingMode = !themes.current().startsWith('generic') ? 'text' : undefined;
-
- fontSizes: FontSize[] = this.service.getFontSizes();
+ customService = inject(Service);
- lineHeights: LineHeight[] = this.service.getLineHeights();
+ stylingMode = !themes.current().startsWith('generic') ? 'text' : undefined;
+ fontSizes: FontSize[] = this.customService.getFontSizes();
+
+ lineHeights: LineHeight[] = this.customService.getLineHeights();
lineHeight: number[] = [this.lineHeights[1].lineHeight];
- fontFamilies: FontFamily[] = this.service.getFontFamilies();
+ fontFamilies: FontFamily[] = this.customService.getFontFamilies();
- headings: Heading[] = this.service.getHeadings();
+ headings: Heading[] = this.customService.getHeadings();
- heading = this.headings[0].text;
+ heading = this.headings[0]?.text;
- fontStyles: FontStyle[] = this.service.getFontStyles();
+ fontStyles: FontStyle[] = this.customService.getFontStyles();
- textAlignItems: TextAlign[] = this.service.getTextAlign();
+ textAlignItems: TextAlign[] = this.customService.getTextAlign();
- textAlignItemsExtended: TextAlignExtended[] = this.service.getTextAlignExtended();
+ textAlignItemsExtended: TextAlignExtended[] = this.customService.getTextAlignExtended();
- selectedTextAlign = [this.textAlignItems[0].alignment];
+ selectedTextAlign = [this.textAlignItems[0]?.alignment];
- listTypes: ListType[] = this.service.getListType();
+ listTypes: ListType[] = this.customService.getListType();
- constructor(private service: Service) {}
+ constructor() {
+ }
onTextAlignChanged(e: { itemData: { hint: string } }): void {
this.onButtonClick(e.itemData.hint);
@@ -107,4 +109,4 @@ export class AppComponent {
})
export class AppModule {}
-platformBrowserDynamic().bootstrapModule(AppModule);
+platformBrowserDynamic().bootstrapModule(AppModule);
\ No newline at end of file
diff --git a/apps/demos/Demos/TreeList/FilterPanel/Angular/app/app.component.html b/apps/demos/Demos/TreeList/FilterPanel/Angular/app/app.component.html
index 88c08a28b2f4..f3d0a1989c02 100644
--- a/apps/demos/Demos/TreeList/FilterPanel/Angular/app/app.component.html
+++ b/apps/demos/Demos/TreeList/FilterPanel/Angular/app/app.component.html
@@ -4,7 +4,6 @@
keyExpr="ID"
parentIdExpr="Head_ID"
[expandedRowKeys]="[1]"
- [columns]="columns"
[filterValue]="filterValue"
[showBorders]="true"
>