fix demos to angular 21 syntax

Author: GoodDayForSurf

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

@@ -1,5 +1,5 @@
-import { Component, NgModule, enableProdMode } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
+import { Component, NgModule, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { bootstrapApplication } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { DxPopupModule, DxScrollViewModule } from 'devextreme-angular';
 import { DxButtonModule, DxButtonTypes } from 'devextreme-angular/ui/button';
@@ -15,10 +15,14 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
-  standalone: false,
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],
+  imports: [
+    DxPopupModule,
+    DxButtonModule,
+    DxScrollViewModule,
+  ],
 })
 
 export class AppComponent {
@@ -46,17 +50,8 @@ export class AppComponent {
   }
 }
 
-@NgModule({
-  imports: [
-    BrowserModule,
-    DxPopupModule,
-    DxButtonModule,
-    DxScrollViewModule,
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
   ],
-  declarations: [AppComponent],
-  bootstrap: [AppComponent],
-})
-
-export class AppModule { }
-
-platformBrowserDynamic().bootstrapModule(AppModule);
+});

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

@@ -41,14 +41,11 @@ <h3>DXCinema Show Times</h3>
         >Ticket Price:
         <strong>{{ "$" + model.targetedAppointmentData.price }}</strong>
       </div>
-      <div class="dropdown-appointment-dates">
-        {{
-          (model.targetedAppointmentData.displayStartDate
-            | date : "shortTime") +
+      <div class="dropdown-appointment-dates">{{
+        (model.targetedAppointmentData.displayStartDate | date : "shortTime") +
             " - " +
             (model.targetedAppointmentData.displayEndDate | date : "shortTime")
-        }}
-      </div>
+        }}</div>
     </div>
   </div>
 

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

@@ -1,8 +1,9 @@
-import { NgModule, Component, enableProdMode } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
+import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { bootstrapApplication } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { HttpClient, provideHttpClient, withFetch } from '@angular/common/http';
 import { lastValueFrom } from 'rxjs';
+
 import { DxTreeViewComponent, DxTreeViewModule } from 'devextreme-angular';
 
 if (!/localhost/.test(document.location.host)) {
@@ -16,10 +17,10 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
-  standalone: false,
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   providers: [],
+  imports: [DxTreeViewModule],
 })
 export class AppComponent {
   createChildren: DxTreeViewComponent['createChildren'];
@@ -35,15 +36,8 @@ export class AppComponent {
   }
 }
 
-@NgModule({
-  imports: [
-    BrowserModule,
-    DxTreeViewModule,
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
   ],
-  providers: [provideHttpClient(withFetch())],
-  declarations: [AppComponent],
-  bootstrap: [AppComponent],
-})
-export class AppModule { }
-
-platformBrowserDynamic().bootstrapModule(AppModule);
+});