fix demos to angular 21 syntax

Author: GoodDayForSurf

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

@@ -1,9 +1,7 @@
 import {
-  NgModule, Component, Pipe, PipeTransform, enableProdMode,
+  Component, Pipe, PipeTransform, enableProdMode, provideZoneChangeDetection,
 } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { provideHttpClient, withFetch } from '@angular/common/http';
+import { bootstrapApplication } from '@angular/platform-browser';
 import { ArrayStore } from 'devextreme-angular/common/data';
 import { DxDiagramModule, DxDiagramTypes } from 'devextreme-angular/ui/diagram';
 import { Service } from './app.service';
@@ -18,13 +16,25 @@ if (window && window.config?.packageConfigPaths) {
   modulePrefix = '/app';
 }
 
+@Pipe({ name: 'stringifyItems', standalone: true })
+export class StringifyItemsPipe implements PipeTransform {
+  transform(items: DxDiagramTypes.Item[], textExpression: string): string {
+    return items
+        .map((item) => item.dataItem[textExpression])
+        .join(', ');
+  }
+}
+
 @Component({
-  standalone: false,
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],
   providers: [Service],
   preserveWhitespaces: true,
+  imports: [
+    DxDiagramModule,
+    StringifyItemsPipe,
+  ],
 })
 export class AppComponent {
   dataSource: ArrayStore;
@@ -56,25 +66,8 @@ export class AppComponent {
   }
 }
 
-@Pipe({ name: 'stringifyItems', standalone: true })
-export class StringifyItemsPipe implements PipeTransform {
-  transform(items: DxDiagramTypes.Item[], textExpression: string): string {
-    return items
-      .map((item) => item.dataItem[textExpression])
-      .join(', ');
-  }
-}
-
-@NgModule({
-  imports: [
-    BrowserModule,
-    DxDiagramModule,
-    StringifyItemsPipe,
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
   ],
-  providers: [provideHttpClient(withFetch())],
-  declarations: [AppComponent],
-  bootstrap: [AppComponent],
-})
-export class AppModule { }
-
-platformBrowserDynamic().bootstrapModule(AppModule);
+});

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

@@ -1,6 +1,5 @@
-import { NgModule, Component, enableProdMode } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { bootstrapApplication } from '@angular/platform-browser';
 import { DxListModule } from 'devextreme-angular';
 import { DxSortableTypes } from 'devextreme-angular/ui/sortable';
 import { Task, Service } from './app.service';
@@ -18,12 +17,12 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
-  standalone: false,
   selector: 'demo-app',
   providers: [Service],
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],
   preserveWhitespaces: true,
+  imports: [DxListModule],
 })
 export class AppComponent {
   doingTasks: Task[];
@@ -53,14 +52,8 @@ export class AppComponent {
   };
 }
 
-@NgModule({
-  imports: [
-    BrowserModule,
-    DxListModule,
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
   ],
-  declarations: [AppComponent],
-  bootstrap: [AppComponent],
-})
-export class AppModule { }
-
-platformBrowserDynamic().bootstrapModule(AppModule);
+});