Upgrade to angular 16

Author: legrottagliegionata

.gitignore

@@ -63,3 +63,5 @@ dist/
 /src/ang-jsoneditor
 package-lock.json
 yarn.lock
+
+.idea

README.md

@@ -6,7 +6,7 @@ Angular Json Editor (wrapper for [jsoneditor](https://github.com/josdejong/jsone
 
 [StackBlitz template](https://stackblitz.com/edit/ang-jsoneditor)
 
-Working with latest Angular 9. 
+Working with latest Angular 16. 
 
 ![Demo Image](/src/assets/printDemo.png)
 

ang-jsoneditor/README.md

@@ -6,7 +6,7 @@ Angular Json Editor (wrapper for [jsoneditor](https://github.com/josdejong/jsone
 
 [StackBlitz template](https://stackblitz.com/edit/ang-jsoneditor)
 
-Working with latest Angular 9. 
+Working with latest Angular 16. 
 
 ![Demo Image](/src/assets/printDemo.png)
 

ang-jsoneditor/package.json

@@ -18,7 +18,7 @@
   "peerDependencies": {
     "@angular/core": "*",
     "@angular/common": "*",
-    "jsoneditor": "9.10.2"
+    "jsoneditor": "^9.10.2"
   },
   "ngPackage": {
     "$schema": "./node_modules/ng-packagr/ng-package.schema.json",

angular.json

@@ -138,7 +138,10 @@
             "buildOptimizer": false,
             "sourceMap": true,
             "optimization": false,
-            "namedChunks": true
+            "namedChunks": true,
+            "allowedCommonJsDependencies": [
+              "jsoneditor"
+            ]
           },
           "configurations": {
             "production": {
@@ -209,7 +212,7 @@
   "schematics": {
     "@schematics/angular:component": {
       "prefix": "app",
-      "styleext": "css"
+      "style": "css"
     },
     "@schematics/angular:directive": {
       "prefix": "app"

package.json

@@ -28,36 +28,36 @@
     "rebuildsass": "npm rebuild node-sass"
   },
   "dependencies": {
-    "@angular/common": "15.2.9",
-    "@angular/compiler": "15.2.9",
-    "@angular/core": "15.2.9",
-    "@angular/forms": "15.2.9",
-    "@angular/platform-browser": "15.2.9",
-    "@angular/platform-browser-dynamic": "15.2.9",
-    "@angular/router": "15.2.9",
+    "@angular/common": "16.1.8",
+    "@angular/compiler": "16.1.8",
+    "@angular/core": "16.1.8",
+    "@angular/forms": "16.1.8",
+    "@angular/platform-browser": "16.1.8",
+    "@angular/platform-browser-dynamic": "16.1.8",
+    "@angular/router": "16.1.8",
     "core-js": "^3.6.4",
     "jsoneditor": "9.10.2",
     "rxjs": "*",
-    "webpack": "^4.46.0",
-    "zone.js": "~0.11.4"
+    "webpack": "^5.88.2",
+    "zone.js": "~0.13.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^15.2.8",
-    "@angular-devkit/schematics": "^15.2.8",
-    "@angular-eslint/builder": "15.2.1",
-    "@angular-eslint/eslint-plugin": "15.2.1",
-    "@angular-eslint/eslint-plugin-template": "15.2.1",
-    "@angular-eslint/schematics": "15.2.1",
-    "@angular-eslint/template-parser": "15.2.1",
-    "@angular/cli": "15.2.8",
-    "@angular/compiler-cli": "15.2.9",
-    "@angular/language-service": "15.2.9",
+    "@angular-devkit/build-angular": "^16.1.8",
+    "@angular-devkit/schematics": "^16.1.8",
+    "@angular-eslint/builder": "16.1.0",
+    "@angular-eslint/eslint-plugin": "16.1.0",
+    "@angular-eslint/eslint-plugin-template": "16.1.0",
+    "@angular-eslint/schematics": "16.1.0",
+    "@angular-eslint/template-parser": "16.1.0",
+    "@angular/cli": "^16.1.8",
+    "@angular/compiler-cli": "16.1.8",
+    "@angular/language-service": "16.1.8",
     "@types/jasmine": "~3.6.0",
     "@types/node": "^13.7.1",
-    "@typescript-eslint/eslint-plugin": "5.27.1",
-    "@typescript-eslint/parser": "5.27.1",
+    "@typescript-eslint/eslint-plugin": "^5.59.2",
+    "@typescript-eslint/parser": "^5.59.2",
     "cpr": "^3.0.0",
-    "eslint": "^8.17.0",
+    "eslint": "^8.39.0",
     "eslint-plugin-import": "latest",
     "eslint-plugin-jsdoc": "latest",
     "eslint-plugin-prefer-arrow": "latest",
@@ -70,12 +70,12 @@
     "karma-coverage-istanbul-reporter": "^2.0.0",
     "karma-jasmine": "5.1.0",
     "karma-jasmine-html-reporter": "2.0.0",
-    "ng-packagr": "^15.2.2",
-    "protractor": "~7.0.0",
+    "ng-packagr": "^16.1.0",
+    "protractor": "^7.0.0",
     "rimraf": "^2.7.1",
     "ts-node": "~7.0.0",
     "tslib": "^2.0.0",
     "typescript": "4.9.5",
     "webpack-cli": "^4.9.2"
   }
-}
+}

src/app/demo/show.component.ts

@@ -1,17 +1,12 @@
-import { Component, OnInit, ViewChild, Input } from '@angular/core';
-import { JsonEditorComponent, JsonEditorOptions } from '../../../ang-jsoneditor/src/public_api';
+import { Component, Input } from "@angular/core";
 
-@Component({
-  selector: 'app-show',
-  template: '<div>{{showData()}}</div>'
+@Component ({
+  selector: "app-show",
+  template: "<div>{{data | json}}</div>"
 })
 export class ShowComponent {
 
-  @Input()
+  @Input ()
   public data;
 
-  showData(){
-    return JSON.stringify(this.data, null, 2);
-  }
-
 }