Change detection doesn't run when Model is updated.

[aakashyap]

I am trying to use ngx-monaco-editor to be able to load multiple files one at a time. I only have 1 instance of ngx-monaco-editor defined in my app-component.html file :

<ngx-monaco-editor [options]="options" [model]="model" [(ngModel)]="code"></ngx-monaco-editor>
<button (click)="load()">Load file </button>

On click of a button (one corresponding to each file) I update the model for Monaco-editor to display the new code:

In app-component.ts:

load(): void {
this.code = getCodeInClickedFile();
this.model = { ...this.model, value: this.code, language: 'json', uri: Uri.parse('a-b.json') };
}

As ngx-monaco-editor uses onPush strategy Issue-6, the above reference update of model object should have triggered Change detection. But the change detection is not triggered unless I press the buttons (or trigger any other event) twice.
This is not the case when I want to update options as mentioned in Issue-6 above. I believe this is due to the fact that when option is updated the reference of options is getting updated

ngx-monaco-editor/projects/editor/src/lib/editor.component.ts

Line 39 in 94c1fe1

this._options = Object.assign({}, this.config.defaultOptions, options);

whereas in case of model only the member property is updated

ngx-monaco-editor/projects/editor/src/lib/editor.component.ts

Line 52 in 94c1fe1

this.options.model = model;

which doesn't trigger onPush change detection strategy. The change takes effect only when a second event is triggered and change detection is executed.

Is my understanding correct? if not is there a workaround for code change to be visible as soon as the file is loaded (on click of a link or button)?

Thanks

[Disane87]

We can reproduce this issue aswell. Actually I don't found any workaround.

[maks-humeniuk]

In my case, if I have both [(ngModel)]="value" and [model]="model" on <ngx-monaco-editor>, then changing value programmatically doesn't update the editor value on UI. To do that I have to update the whole model like this: this.model = { value: this.value };.

Please note that model change triggers editor blur event.