How to detect changes in ngx-monaco-diff-editor

[jcr0ss]

Since there is no ngModel and (ngModelChange) doesn't work, how can I call a function when the value of the modified editor changes?

[hendrikbursian]

I had the same problem.

You can get the changes like the following.

In your template bind the onInit event.

  <ngx-monaco-diff-editor
    [options]="options"
    [originalModel]="originalModel"
    [modifiedModel]="modifiedModel"
    (onInit)="onInitDiffEditor($event)"
  ></ngx-monaco-diff-editor>

and in your component add the onInit function like this to get notified about every change.

onInitDiffEditor(diffEditor: monaco.editor.IStandaloneDiffEditor) {
  if (!diffEditor) {
    return;
  }

  diffEditor.getModifiedEditor().onDidChangeModelContent(() => {
    const content = diffEditor.getModel().modified.getValue();
    console.log(content);
  });
}

[scaljeri]

Thnx @hendrikbursian. It seems that onInit is changed into init

[dc-p8]

I was able to detect changes by doing something like this.

<ngx-monaco-diff-editor 
    ngDefaultControl
    [(ngModel)]="compareModel"
    (ngModelChange)="do what you want here"
    [ngModelOptions]="{standalone: true}"
    [originalModel]="{code: compareModel, language: 'plain/html'}"
    [modifiedModel]="{code: originalModel', language: 'plain/html'}">
</ngx-monaco-diff-editor>

Unfortunately this works only when you enter new characters, but not when you delete characters. I also abserved the same behaviour with the (input) event.

I tested the solution posted by @hendrikbursian and it works fine.