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 https://github.com/atularen/ngx-monaco-editor/blob/94c1fe19061ee3a1b9d4a0587dd5c82f7c496f2e/projects/editor/src/lib/editor.component.ts#L39 whereas in case of model only the member property is updated https://github.com/atularen/ngx-monaco-editor/blob/94c1fe19061ee3a1b9d4a0587dd5c82f7c496f2e/projects/editor/src/lib/editor.component.ts#L52 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.