Documentation(1023562): Package Update

angular.json

@@ -18,14 +18,13 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
-            "aot": false,
+            "aot": true,
             "assets": [
               "src/favicon.ico",
               "src/assets"
             ],
             "styles": [
-              "src/styles.css",
-              "./node_modules/@syncfusion/ej2-material-theme/styles/material.css"
+              "src/styles.css"
             ],
             "scripts": []
           },
@@ -64,18 +63,18 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "getting-started:build"
+            "buildTarget": "getting-started:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "getting-started:build:production"
+              "buildTarget": "getting-started:build:production"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "getting-started:build"
+            "buildTarget": "getting-started:build"
           }
         },
         "test": {
@@ -90,8 +89,7 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.css",
-              "./node_modules/@syncfusion/ej2-material-theme/styles/material.css"
+              "src/styles.css"
             ],
             "scripts": []
           }
@@ -124,5 +122,8 @@
       }
     }
   },
-  "defaultProject": "getting-started"
+  "defaultProject": "getting-started",
+  "cli": {
+    "analytics": "0fe51e98-4163-4afa-b864-273cd7f853ee"
+  }
 }

package.json

@@ -11,40 +11,33 @@
   },
   "private": true,
   "dependencies": {
-   "@angular/animations": "~10.2.5",
-    "@angular/common": "~10.2.5",
-    "@angular/compiler": "~10.2.5",
-    "@angular/core": "~10.2.5",
-    "@angular/forms": "~10.2.5",
-    "@angular/platform-browser": "~10.2.5",
-    "@angular/platform-browser-dynamic": "~10.2.5",
-    "@angular/router": "~10.2.5",
-    "@syncfusion/ej2-angular-grids": "^18.4.30",
-    "@syncfusion/ej2-angular-schedule": "^18.4.30",
+    "@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-grids": "*",
+    "@syncfusion/ej2-angular-schedule": "*",
+    "@syncfusion/ej2-angular-treegrid": "^33.2.3",
     "core-js": "^3.6.5",
-    "rxjs": "~6.6.0",
-    "tslib": "^2.0.0",
-    "zone.js": "~0.10.3"
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1002.4",
-    "@angular/cli": "~10.2.4",
-    "@angular/compiler-cli": "~10.2.5",
-    "@angular/language-service": "~10.2.5",
-    "@types/jasmine": "~3.5.0",
-    "@types/jasminewd2": "~2.0.3",
-    "@types/node": "^12.11.1",
-    "codelyzer": "^6.0.0",
-    "jasmine-core": "~3.5.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.4.0",
-    "protractor": "~7.0.0",
-    "ts-node": "~8.3.0",
-    "tslint": "~6.1.0",
-    "typescript": "4.0.8"
+    "@angular-devkit/build-angular": "^20.3.24",
+    "@angular/cli": "^20.0.0",
+    "@angular/compiler-cli": "^20.0.0",
+    "@types/jasmine": "~5.1.0",
+    "jasmine-core": "~5.1.0",
+    "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.html

@@ -120,7 +120,7 @@
     ></e-column>
     <e-column field="Country" headerText="Country" width="148"></e-column>
   </e-columns>
-</ejs-treegrid>-->
+</ejs-treegrid> -->
 
 <!-- Column rendering based on Conditional template and ValueAccessor -->
 <ejs-treegrid

src/app/app.component.ts

@@ -1,20 +1,28 @@
 import { Component, OnInit } from '@angular/core';
 import { textdata, sampleData } from './datasource';
 import { Internationalization } from '@syncfusion/ej2-base';
+import {
+  TreeGridModule,
+  DetailRowService
+} from '@syncfusion/ej2-angular-treegrid';
+import { CommonModule } from '@angular/common';
 
 var I18n: Internationalization = new Internationalization();
 
 @Component({
   selector: 'app-root',
+  standalone:true,
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  providers: [DetailRowService],
+  styleUrls: ['./app.component.css'],
+  imports: [ TreeGridModule, CommonModule],
 })
 export class AppComponent implements OnInit {
-  public data: Object[];
+  public data!: Object[];
 
   ngOnInit(): void {
     //this.data = textdata; //Uncomment for Row, Column template sample data
-    this.data = sampleData; //Uncomment for Column Condition template & ValueAccessor sample data
+   this.data = sampleData; //Uncomment for Column Condition template & ValueAccessor sample data
   }
 
   public format(value: Date): string {

src/index.html

@@ -6,6 +6,7 @@
   <base href="/">
   <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,7 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+import 'zone.js';
 
-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
+bootstrapApplication(AppComponent)
+  .catch((err) => console.error(err));
 
-if (environment.production) {
-  enableProdMode();
-}
-
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));

src/polyfills.ts

@@ -55,7 +55,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.
 
 
 /***************************************************************************************************

src/styles.css

@@ -1,2 +1,11 @@
-@import '../node_modules/@syncfusion/ej2-material-theme/styles/material.css';
 /* You can add global styles to this file, and also import other style files */
+@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/material3.css';
+@import '../node_modules/@syncfusion/ej2-calendars/styles/material3.css';
+@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material3.css';
+@import '../node_modules/@syncfusion/ej2-inputs/styles/material3.css';
+@import '../node_modules/@syncfusion/ej2-navigations/styles/material3.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/material3.css';
+@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material3.css';
+@import '../node_modules/@syncfusion/ej2-grids/styles/material3.css';
+@import '../node_modules/@syncfusion/ej2-treegrid/styles/material3.css';

tsconfig.json

@@ -1,16 +1,14 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
-    "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
     "declaration": false,
-    "downlevelIteration": true,
     "experimentalDecorators": true,
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "importHelpers": true,
-    "target": "es2015",
+    "target": "es2020",
     "typeRoots": [
       "node_modules/@types"
     ],