Fix Angular Demos for Strong Tooling (#28115)

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()"
         >
         </dx-autocomplete>
       </div>
@@ -24,7 +24,7 @@
           [showClearButton]="true"
           [dataSource]="surnames"
           [(value)]="lastName"
-          (onValueChanged)="updateEmployeeInfo($event)"
+          (onValueChanged)="updateEmployeeInfo()"
         >
         </dx-autocomplete>
       </div>
@@ -57,7 +57,7 @@
           valueExpr="State_Long"
           [dataSource]="states"
           [(value)]="state"
-          (onValueChanged)="updateEmployeeInfo($event)"
+          (onValueChanged)="updateEmployeeInfo()"
         >
           <div *dxTemplate="let item of 'item'">
             <span>{{ item.State_Long }} ({{ item.State_Short }})</span>
@@ -78,7 +78,7 @@
           valueExpr="Text"
           [dataSource]="clientsStore"
           [(value)]="currentClient"
-          (onValueChanged)="updateEmployeeInfo($event)"
+          (onValueChanged)="updateEmployeeInfo()"
         >
         </dx-autocomplete>
       </div>

apps/demos/Demos/Charts/FunnelChart/Angular/app/app.component.html

@@ -9,7 +9,7 @@
     <dxo-margin [bottom]="30"></dxo-margin>
   </dxo-title>
   <dxo-export [enabled]="true"></dxo-export>
-  <dxo-tooltip [enabled]="true" [format]="fixedPoint"> </dxo-tooltip>
+  <dxo-tooltip [enabled]="true" format="fixedPoint"> </dxo-tooltip>
   <dxo-item>
     <dxo-border [visible]="true"> </dxo-border>
   </dxo-item>

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()"
   ></dx-file-uploader>
 </div>

apps/demos/Demos/FilterBuilder/WithList/Angular/app/app.component.html

@@ -2,7 +2,6 @@
   <dx-filter-builder
     [fields]="fields"
     [(value)]="filter"
-    [customOperations]="customOperations"
     (onInitialized)="refreshDataSource()"
   >
   </dx-filter-builder>

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;
 

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,
 }

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';

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';

apps/demos/Demos/Gantt/Toolbar/Angular/app/app.component.html

@@ -37,7 +37,7 @@
 </dx-gantt>
 
 <dx-popup
-  [height]="auto"
+  height="auto"
   [showTitle]="true"
   title="About"
   [hideOnOutsideClick]="true"

apps/demos/Demos/Gantt/Toolbar/Angular/app/app.component.ts

@@ -1,4 +1,4 @@
-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, DxPopupModule } from 'devextreme-angular';

apps/demos/Demos/Gauges/UpdateLinearGaugeDataAtRuntime/Angular/app/app.component.ts

@@ -27,7 +27,7 @@ if (window && window.config.packageConfigPaths) {
 export class AppComponent {
   cities: City[];
 
-  weatherData: City;
+  weatherData: City['data'];
 
   constructor(service: Service) {
     this.cities = service.getCities();

apps/demos/Demos/List/WebAPI/Angular/app/app.component.html

@@ -4,7 +4,7 @@
     [dataSource]="listData"
     [grouped]="true"
     [collapsibleGroups]="true"
-    [selectionMode]="multiple"
+    selectionMode="multiple"
     [showSelectionControls]="true"
     pageLoadMode="scrollBottom"
     itemTemplate="data"

apps/demos/Demos/LoadPanel/Overview/Angular/app/app.component.html

@@ -4,20 +4,20 @@
 
 <div id="employee">
   <p>
-    Birth date: <b>{{ employeeInfo.Birth_Date }}</b>
+    Birth date: <b>{{ employeeInfo?.Birth_Date }}</b>
   </p>
   <p class="address">
     Address:<br />
     <b>{{ employeeInfo.City }}</b
     ><br />
-    <span>{{ employeeInfo.Zipcode }}</span>
-    <span>{{ employeeInfo.Address }}</span>
+    <span>{{ employeeInfo?.Zipcode }}</span>
+    <span>{{ employeeInfo?.Address }}</span>
   </p>
   <p>
     Phone:
-    <b>{{ employeeInfo.Mobile_Phone }}</b
+    <b>{{ employeeInfo?.Mobile_Phone }}</b
     ><br />
-    Email: <b>{{ employeeInfo.Email }}</b>
+    Email: <b>{{ employeeInfo?.Email }}</b>
   </p>
 </div>
 

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;
   }
 }

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` : '';
   }
 }

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()"
     >
     </dx-button>
     <div class="label"> A native scrollable container </div>
@@ -14,7 +14,7 @@
     <dx-button
       text="Show Popup"
       [width]="300"
-      (onClick)="showPopupWithScrollView($event)"
+      (onClick)="showPopupWithScrollView()"
     >
     </dx-button>
     <div class="label"> The ScrollView </div>

apps/demos/Demos/RangeSelector/ImageOnBackground/Angular/app/app.component.html

@@ -17,10 +17,10 @@
     [endValue]="endValue"
     [placeholderHeight]="20"
   >
-    <dxo-label [format]="shorttime"> </dxo-label>
+    <dxo-label format="shorttime"> </dxo-label>
     <dxo-minor-tick-interval [hours]="1"> </dxo-minor-tick-interval>
     <dxo-tick-interval [hours]="2"> </dxo-tick-interval>
   </dxo-scale>
-  <dxo-slider-marker [format]="shorttime" [placeholderHeight]="30">
+  <dxo-slider-marker format="shorttime" [placeholderHeight]="30">
   </dxo-slider-marker>
 </dx-range-selector>

apps/demos/Demos/Scheduler/Adaptability/Angular/app/app.component.html

@@ -19,6 +19,6 @@
 <dx-speed-dial-action
   #speedDialAction
   icon="plus"
-  (onClick)="showAppointmentPopup($event)"
+  (onClick)="showAppointmentPopup()"
 >
 </dx-speed-dial-action>

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(),
     });

apps/demos/Demos/Scheduler/IncreaseViewDuration/Angular/app/app.component.html

@@ -1,7 +1,6 @@
 <dx-scheduler
   timeZone="America/Los_Angeles"
   [dataSource]="appointmentsData"
-  [views]="views"
   currentView="day"
   [startDayHour]="8"
   [endDayHour]="20"

apps/demos/Demos/Scheduler/LimitAppointmentCountPerCell/Angular/app/app.component.html

@@ -1,7 +1,6 @@
 <dx-scheduler
   timeZone="America/Los_Angeles"
   [dataSource]="appointmentsData"
-  [views]="views"
   currentView="Auto Mode"
   [currentDate]="currentDate"
   [height]="730"

apps/demos/Demos/Toast/Stack/Angular/app/app.component.html

@@ -66,11 +66,7 @@
   >
   </dx-select-box>
   <div class="section">
-    <dx-button text="Show" width="48%" (onClick)="show($event)"></dx-button>
-    <dx-button
-      text="Hide all"
-      width="48%"
-      (onClick)="hideAll($event)"
-    ></dx-button>
+    <dx-button text="Show" width="48%" (onClick)="show()"></dx-button>
+    <dx-button text="Hide all" width="48%" (onClick)="hideAll()"></dx-button>
   </div>
 </div>

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,

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);

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"
 >