diff --git a/README.md b/README.md index 174ec45..c8e6cbf 100644 --- a/README.md +++ b/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 16. +Working with latest Angular 18. ![Demo Image](/src/assets/printDemo.png) @@ -14,8 +14,9 @@ Working with latest Angular 16. To install this library with npm, run below command: +```sh $ npm install --save jsoneditor ang-jsoneditor - +``` Example: @@ -27,25 +28,7 @@ Example: ### Configuration -First, Import Angular JsonEditor module in root - -```ts -import { NgJsonEditorModule } from 'ang-jsoneditor' - -@NgModule({ - declarations: [ - AppComponent - ], - imports: [ - ...., - NgJsonEditorModule - ], - providers: [], - bootstrap: [AppComponent] -}) -export class AppModule { } -``` -Then setup your component models as below : +Import the standalone component as below: ```ts import { Component, ViewChild } from '@angular/core'; @@ -54,19 +37,21 @@ import { JsonEditorComponent, JsonEditorOptions } from 'ang-jsoneditor'; @Component({ selector: 'app-root', template: '', - styleUrls: ['./app.component.css'] + styleUrls: ['./app.component.css'], + imports: [JsonEditorComponent] }) export class AppComponent { public editorOptions: JsonEditorOptions; public data: any; + // optional @ViewChild(JsonEditorComponent, { static: false }) editor: JsonEditorComponent; - constructor() { + constructor() { this.editorOptions = new JsonEditorOptions() this.editorOptions.modes = ['code', 'text', 'tree', 'view']; // set all allowed modes //this.options.mode = 'code'; //set only one mode - - this.data = {"products":[{"name":"car","product":[{"name":"honda","model":[{"id":"civic","name":"civic"},{"id":"accord","name":"accord"},{"id":"crv","name":"crv"},{"id":"pilot","name":"pilot"},{"id":"odyssey","name":"odyssey"}]}]}]} + + this.data = {"products":[{"name":"car","product":[{"name":"honda","model":[{"id":"civic","name":"civic"},{"id":"accord","name":"accord"},{"id":"crv","name":"crv"},{"id":"pilot","name":"pilot"},{"id":"odyssey","name":"odyssey"}]}]}]} } } @@ -82,7 +67,7 @@ Note : For better styling, add below line to your main style.css file Build it integrated with ReactiveForms: -```ts +```ts this.form = this.fb.group({ myinput: [this.data] }); @@ -96,11 +81,11 @@ this.form = this.fb.group({ ### Extra Features -Besides all the -[configuration options](https://github.com/josdejong/jsoneditor/blob/master/docs/api.md) +Besides all the +[configuration options](https://github.com/josdejong/jsoneditor/blob/master/docs/api.md) from the original jsoneditor, Angular Json Editor supports one additional option: -_expandAll_ - to automatically expand all nodes upon json loaded with the _data_ input. +_expandAll_ - to automatically expand all nodes upon json loaded with the _data_ input. # Troubleshoot @@ -153,7 +138,7 @@ let editorOptions: JsonEditorOptions = new JsonEditorOptions(); (this.edito See the [issue](https://github.com/mariohmol/ang-jsoneditor/issues/57) -## Internet Explorer +## Internet Explorer If you want to support IE, please follow this guide: * https://github.com/mariohmol/ang-jsoneditor/issues/44#issuecomment-508650610 @@ -162,7 +147,7 @@ If you want to support IE, please follow this guide: To use multiple jsoneditors in your view you cannot use the same editor options. -You should have something like: +You should have something like: ```html
@@ -187,7 +172,7 @@ When publishing it to npm, look over this docs: https://docs.npmjs.com/misc/deve # Collaborate -Fork, clone this repo and install dependencies. +Fork, clone this repo and install dependencies. This project just works with webpack 4 (dont change to 5): ```sh diff --git a/projects/ang-jsoneditor/package.json b/projects/ang-jsoneditor/package.json index 654af3d..ad01e14 100644 --- a/projects/ang-jsoneditor/package.json +++ b/projects/ang-jsoneditor/package.json @@ -16,8 +16,8 @@ "angular" ], "peerDependencies": { - "@angular/common": "^17.0.0", - "@angular/core": "^17.0.0", + "@angular/common": "^17.0.0 || ^18.0.0", + "@angular/core": "^17.0.0 || ^18.0.0", "jsoneditor": "^9.10.2" }, "dependencies": {