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.
npm install ng-svelte-jsoneditor
@NgModule({
declarations: [
AppComponent
],
imports: [
......
NgSvelteJsonEditorModule
],
providers: [],
bootstrap: [AppComponent]
})
<ng-svelte-jsoneditor [formControl]="editor"></ng-svelte-jsoneditor>
<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
onRenderValue
onRenderMenu
onRenderContextMenu
@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))
ng-svelte-jsoneditor is released as open source under the permissive the ISC license. MIT