Angular json-editor (change) event not getting called post ngIf toggle

Question

Using json-edit from npm ang-jsoneditor inside a modal pop up. Popup is toggled using ngIf

I want to save changes in json-edior.

Code works fine when first time ngIf condition is true and modal pop up appear. Change event get fired.

If ngIf remove and display pop up second time; change event is not getting fired and I don't get updated json in json-editor

<ng-container *ngIf="condition">
<div> //modal
<div>  //modal pop up header</div>
<div>  //modal pop up body 
<json-editor  id="jEditor"  [options]="config"  [data]="data" (change)="onChangeData($event)" </json-editor>
                
                  <button  (click)="closeDialog('fixed')"> Cancel</button>
                  <button (click)="saveJson()" >Save</button>
                
</div>
</ng-container>

Tried below scenario still change event not getting fired

1. Two way binding using ngModel
2. Pass data in click of button

In developer tool of browser, I can see change event listener. Still change event not getting called

Answer 1

There are a few things you could try. It looks like json-editor might have its own version of change detection (check here).

Also, please make sure you are updating data properly in saveJson().

Finally, you could try using (ngModelChange) in conjunction with ngModel (ref).