docs(readme): update usage with Angular 18

README.md

@@ -6,16 +6,17 @@ 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)
 
 ## Installation
 
 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: '<json-editor [options]="editorOptions" [data]="data"></json-editor>',
-  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(); (<any>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
 <div *ngFor="let prd of data.products" class="w-100-p p-24" >
@@ -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