feature(EJ2-65852): Update the Angular showcase samples to latest package version.

package.json

@@ -16,14 +16,14 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~10.0.0",
-    "@angular/common": "~10.0.0",
-    "@angular/compiler": "~10.0.0",
-    "@angular/core": "~10.0.0",
-    "@angular/forms": "~10.0.0",
-    "@angular/platform-browser": "~10.0.0",
-    "@angular/platform-browser-dynamic": "~10.0.0",
-    "@angular/router": "~10.0.0",
+    "@angular/animations": "^15.0.0",
+    "@angular/common": "^15.0.0",
+    "@angular/compiler": "^15.0.0",
+    "@angular/core": "^15.0.0",
+    "@angular/forms": "^15.0.0",
+    "@angular/platform-browser": "^15.0.0",
+    "@angular/platform-browser-dynamic": "^15.0.0",
+    "@angular/router": "^15.0.0",
     "@syncfusion/ej2-angular-base": "*",
     "@syncfusion/ej2-angular-buttons": "*",
     "@syncfusion/ej2-angular-calendars": "*",
@@ -33,32 +33,33 @@
     "@syncfusion/ej2-angular-inputs": "*",
     "@syncfusion/ej2-angular-navigations": "*",
     "@syncfusion/ej2-angular-popups": "*",
+    "ajv": "^8.11.2",
     "gulp": "^3.9.0",
     "gulp-sass": "^3.1.0",
     "run-sequence": "2.2.0",
+    "rxjs": "~7.5.0",
     "shelljs": "^0.7.0",
-    "rxjs": "~6.5.5",
-    "tslib": "^2.0.0",
-    "zone.js": "~0.10.3"
+    "tslib": "^2.3.0",
+    "zone.js": "~0.12.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1000.0",
-    "@angular/cli": "~10.0.0",
-    "@angular/compiler-cli": "~10.0.0",
-    "@types/node": "^10.13.0",
-    "@types/jasmine": "~3.5.0",
+    "@angular-devkit/build-angular": "^15.0.4",
+    "@angular/cli": "~15.0.4",
+    "@angular/compiler-cli": "^15.0.0",
+    "@types/jasmine": "~4.3.0",
     "@types/jasminewd2": "~2.0.3",
+    "@types/node": "^10.13.0",
     "codelyzer": "^6.0.0-next.1",
-    "jasmine-core": "~3.5.0",
+    "jasmine-core": "~4.5.0",
     "jasmine-spec-reporter": "~5.0.0",
-    "karma": "~5.0.0",
+    "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage-istanbul-reporter": "~3.0.2",
-    "karma-jasmine": "~3.3.0",
-    "karma-jasmine-html-reporter": "^1.5.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.0.0",
     "protractor": "~7.0.0",
     "ts-node": "~8.3.0",
     "tslint": "~6.1.0",
-    "typescript": "~3.9.5"
+    "typescript": "~4.8.2"
   }
 }

src/app/dashboard/pie-chart/pie-chart.component.html

@@ -8,7 +8,7 @@
                 </div>
                 <div class="row">
                     <div class="pieChart">
-                        <ejs-accumulationchart style='display: block;' #pie id="total-expense" #pie width='100%' height='350px' enableSmartLabels=true
+                        <ejs-accumulationchart style='display: block;' #pie id="total-expense" width='100%' height='350px' enableSmartLabels=true
                             [legendSettings]='legendSettings' (textRender)='onTextRender($event)' (animationComplete)='onAnimateCompleted($event)'
                             (loaded)='onChartLoaded($event)'>
                             <e-accumulation-series-collection>