Documentation(1023562): Update package

angular.json

@@ -58,18 +58,18 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "editing:build"
+            "buildTarget": "editing:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "editing:build:production"
+              "buildTarget": "editing:build:production"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "editing:build"
+            "buildTarget": "editing:build"
           }
         },
         "test": {
@@ -133,5 +133,8 @@
       }
     }
   },
-  "defaultProject": "editing"
+  "defaultProject": "editing",
+  "cli": {
+    "analytics": "18303077-2711-4d0d-984a-85cfd50dc53b"
+  }
 }

package.json

@@ -11,40 +11,36 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^11.2.19",
-    "@angular/common": "^11.2.19",
-    "@angular/compiler": "^11.2.19",
-    "@angular/core": "^11.2.19",
-    "@angular/forms": "^11.2.19",
-    "@angular/platform-browser": "^11.2.19",
-    "@angular/platform-browser-dynamic": "^11.2.19",
-    "@angular/router": "^11.2.19",
-    "@syncfusion/ej2-angular-treegrid": "^17.3.27",
-    "@syncfusion/ej2-material-theme": "~17.2.48",
-    "core-js": "^2.6.10",
-    "rxjs": "~6.6.7",
-    "zone.js": "~0.10.3"
+    "@angular/animations": "^20.0.0",
+    "@angular/common": "^20.0.0",
+    "@angular/compiler": "^20.0.0",
+    "@angular/core": "^20.0.0",
+    "@angular/forms": "^20.0.0",
+    "@angular/platform-browser": "^20.0.0",
+    "@angular/platform-browser-dynamic": "^20.0.0",
+    "@angular/router": "^20.0.0",
+    "@syncfusion/ej2-angular-treegrid": "*",
+    "@syncfusion/ej2-material-theme": "*",
+    "angular-in-memory-web-api": "^0.18.0",
+    "core-js": "^3.0.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1102.19",
-    "@angular/cli": "~11.2.19",
-    "@angular/compiler-cli": "^11.2.19",
-    "@angular/language-service": "^11.2.19",
-    "@types/jasmine": "~3.8.0",
-    "@types/jasminewd2": "^2.0.8",
-    "@types/node": "~12.11.1",
-    "angular-in-memory-web-api": "^0.11.0",
-    "codelyzer": "~6.0.0",
-    "jasmine-core": "~3.8.0",
+    "@angular-devkit/build-angular": "^20.3.24",
+    "@angular/cli": "^20.0.0",
+    "@angular/compiler-cli": "^20.0.0",
+    "@angular/language-service": "^20.0.0",
+    "@types/jasmine": "~5.1.0",
+    "@types/node": "^22.0.0",
+    "jasmine-core": "~5.1.0",
     "jasmine-spec-reporter": "~5.0.0",
-    "karma": "~6.3.16",
-    "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage-istanbul-reporter": "~3.0.2",
-    "karma-jasmine": "~4.0.0",
-    "karma-jasmine-html-reporter": "^1.5.0",
-    "protractor": "~7.0.0",
-    "ts-node": "~9.0.0",
-    "tslint": "~6.1.0",
-    "typescript": "~4.0.3"
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "typescript": "~5.8.2"
   }
 }

src/app/app.component.ts

@@ -1,19 +1,26 @@
 import { Component, OnInit } from "@angular/core";
+import { CommonModule } from "@angular/common";
 import {
   EditSettingsModel,
-  DataStateChangeEventArgs
+  DataStateChangeEventArgs,
+  TreeGridModule,
+  EditService,
+  ToolbarService
 } from "@syncfusion/ej2-angular-treegrid";
 import { Observable } from "rxjs";
 import { TaskStoreService } from "./task-store.service";
 
 @Component({
   selector: "app-root",
   templateUrl: "./app.component.html",
-  styleUrls: ["./app.component.css"]
+  styleUrls: ["./app.component.css"],
+  standalone: true,
+  imports: [CommonModule, TreeGridModule],
+  providers: [TaskStoreService, EditService, ToolbarService]
 })
 export class AppComponent implements OnInit {
-  public editSettings: EditSettingsModel;
-  public toolbar: String[];
+  public editSettings!: EditSettingsModel;
+  public toolbar!: String[];
 
   public tasks: Observable<DataStateChangeEventArgs>;
 

src/app/task-data.service.spec.ts

@@ -6,7 +6,7 @@ describe('TaskDataService', () => {
   beforeEach(() => TestBed.configureTestingModule({}));
 
   it('should be created', () => {
-    const service: TaskDataService = TestBed.get(TaskDataService);
+    const service: TaskDataService = TestBed.inject(TaskDataService);
     expect(service).toBeTruthy();
   });
 });

src/app/task-data.service.ts

@@ -1,11 +1,13 @@
 import { Injectable } from "@angular/core";
-import { InMemoryDbService } from "angular-in-memory-web-api";
+import { InMemoryDbService, RequestInfo } from "angular-in-memory-web-api";
 import { TaskModel } from "./task-model";
 
 @Injectable({
   providedIn: "root"
 })
 export class TaskDataService implements InMemoryDbService {
+  private db: { tasks: TaskModel[] } | null = null;
+
   constructor() {}
 
   createDb() {
@@ -111,6 +113,53 @@ export class TaskDataService implements InMemoryDbService {
         isParent: false
       }
     ];
-    return { tasks };
+
+    if (!this.db) {
+      this.db = { tasks };
+    }
+    return this.db;
+  }
+
+  // Handle POST requests (Create)
+  post(reqInfo: RequestInfo) {
+    if (reqInfo.collection === 'tasks') {
+      const newTask = reqInfo.utils.getJsonBody(reqInfo.req);
+      const db = this.createDb();
+      const maxId = db.tasks.reduce((max, task) => Math.max(max, task.id as number), 0);
+      newTask.id = maxId + 1;
+      db.tasks.push(newTask);
+      return reqInfo.utils.createResponse$(() => ({ status: 200, body: newTask }));
+    }
+    return undefined;
+  }
+
+  // Handle PUT requests (Update)
+  put(reqInfo: RequestInfo) {
+    if (reqInfo.collection === 'tasks') {
+      const db = this.createDb();
+      const id = reqInfo.id;
+      const updatedTask = reqInfo.utils.getJsonBody(reqInfo.req);
+      const index = db.tasks.findIndex(t => t.id === id);
+      if (index > -1) {
+        db.tasks[index] = { ...db.tasks[index], ...updatedTask };
+      }
+      return reqInfo.utils.createResponse$(() => ({ status: 200, body: db.tasks[index] }));
+    }
+    return undefined;
+  }
+
+  // Handle DELETE requests
+  delete(reqInfo: RequestInfo) {
+    if (reqInfo.collection === 'tasks') {
+      const db = this.createDb();
+      const id = reqInfo.id;
+      const index = db.tasks.findIndex(t => t.id === id);
+      if (index > -1) {
+        const deletedTask = db.tasks[index];
+        db.tasks.splice(index, 1);
+        return reqInfo.utils.createResponse$(() => ({ status: 200, body: deletedTask }));
+      }
+    }
+    return undefined;
   }
 }

src/app/task-store.service.ts

@@ -30,8 +30,8 @@ export class TaskStoreService extends Subject<DataStateChangeEventArgs> {
         (response: any) =>
           <any>{
             result:
-              state.take > 0
-                ? response.slice(state.skip, state.take)
+              state && state.take > 0
+                ? response.slice(state.skip, state.skip + state.take)
                 : response,
             count: response.length
           }

src/index.html

@@ -7,6 +7,7 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
 </head>
 <body>
   <app-root></app-root>

src/main.ts

@@ -1,12 +1,23 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { enableProdMode, importProvidersFrom } from '@angular/core';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 
-import { AppModule } from './app/app.module';
+import { AppComponent } from './app/app.component';
 import { environment } from './environments/environment';
+import { HttpClientInMemoryWebApiModule, InMemoryBackendConfig } from 'angular-in-memory-web-api';
+import { TaskDataService } from './app/task-data.service';
 
 if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+const inMemoryApiConfig: InMemoryBackendConfig = {
+  dataEncapsulation: false
+};
+
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideHttpClient(withInterceptorsFromDi()),
+    importProvidersFrom(HttpClientInMemoryWebApiModule.forRoot(TaskDataService, inMemoryApiConfig))
+  ]
+}).catch(err => console.error(err));

src/polyfills.ts

@@ -72,7 +72,7 @@
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
-import 'zone.js/dist/zone';  // Included with Angular CLI.
+import 'zone.js';  // Included with Angular CLI.
 
 
 /***************************************************************************************************