Can we bind [(ngModel)] to JsonEditor ?

[SwapnilChidrawar]

In this editor in order to get the changed data in editor we are using onChange method detection. Instead, Can we use angular's [(ngModel)] (Two way binding ) so that we will not need to hit onChange method.

Following is my code with the OnChange method in component.ts file:
`
public editorOptions: JsonEditorOptions;
@ViewChild(JsonEditorComponent) editor: JsonEditorComponent;

constructor() {
 this.editorOptions = new JsonEditorOptions();
}

ngOnInit() {
 this.editorOptions.onChange = () => {
  this.change();
};

change(): void {
   console.log(this.editor.getText());  
}

Inside the template we are using as follows :
"<div class="jsoneditor-wrapper" [ngClass]="cssClass">
<json-editor
[options]="editorOptions"
[data]="data">
"

The issue is getting occurred very first time without making any change to editor, we are going to fetch the data which already has JSON object, but because change event is not detected by the jsoneditor it is giving me undefined value while doing editor.getText() method. For this reason it will be great if we use Angular's Two way binding approach.

[mariohmol]

You need to bind the change method.. remember? https://github.com/mariohmol/ang-jsoneditor/blob/master/src/app/demo/demo.component.ts#L49

[osmanraifgunes]

Cannot use event.target.get() or event.currentTarget.get()

this seems necessary if the ui has multiple (not certain count) editors.

[ropstah]

@mariohmol first: thank you for this library!

I got to this thread trying to see if I could use two-way databinding. I've been using this component for quite a few years already, both in jQuery, AngularJS and your Angular version and I always remembered that two-way databinding was 'a thing'...

You need to bind the change method.. remember? https://github.com/mariohmol/ang-jsoneditor/blob/master/src/app/demo/demo.component.ts#L49

I don't really remember... Can you explain why it is not possible to use two-way binding?

[mariohmol]

Hi!!
I tried to make this to work but when using the ngModel with ngpackagr I faced a bug there =(

ng-packagr/ng-packagr#1151

If u can ask in there if is any news!!

Thanks!