Ng-svelte-jsoneditor NPM

ng-svelte-jsoneditor

Angular Json Editor (wrapper for svelte-jsoneditor). View/Edit Json file with formatting.

A web-based tool to view, edit, format, transform, and validate JSON.

Installation

  npm install ng-svelte-jsoneditor

Usage

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ......
    NgSvelteJsonEditorModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

<ng-svelte-jsoneditor [formControl]="editor"></ng-svelte-jsoneditor>

Methods

<ng-svelte-jsoneditor [formControl]="editor" [options]="options" (onInitialized)="onInitialized($event)"></ng-svelte-jsoneditor>

Use pre-defined options & methods

options: JSONEditorPropsOptional = {
  onChange: (c) => {
    //console.log(c);   
  }
};

Same methods are accessible via subscription

onInitialized(eventSub: {[key: string]: Subject<any>}) {
  eventSub['onChange'].subscribe((c: any) => {
    
  });
}

Supported Methods For Above

onChangeQueryLanguage
onChange
onClassName
onChangeMode
onSelect
onError
onFocus
onBlur

@Inputs - methods

onRenderValue
onRenderMenu
onRenderContextMenu

Accessing component reference

@ViewChild(NgSvelteJsoneditorComponent, { static: true }) ngSvelteJsoneditorComponent: NgSvelteJsoneditorComponent | undefined

Disable field

this.editor.disable()

Set options

<!-- Method 1 -->
this.ngSvelteJsoneditorComponent?.setOptions(
  {
    mode: Mode.text
  }
)

<!-- Method 2 -->
this.options.mode = Mode.text;
this.options = JSON.parse(JSON.stringify(this.options))