When using nodechange model events angular throws a ExpressionChangedAfterItHasBeenCheckedError

[solomon23]

What is the current behavior?

Set the modelEvents with

<editor
          modelEvents="change input undo redo nodechange"
          [apiKey]="TINY_MCE_KEY"
          [init]="editorConfig"
          [(ngModel)]="noteText"
        ></editor>

change the model in response to a button press

  noteText = ''

You'll get the ExpressionChangedAfterItHasBeenCheckedError script error

Please provide the steps to reproduce and if possible a minimal demo of the problem via codesandbox.io or similar.

What is the expected behavior?

Which versions of TinyMCE/TinyMCE-Angular, and which browser / OS are affected by this issue? Did this work in previous versions of TinyMCE or TinyMCE-Angular?

[exalate-issue-sync[bot]]

Ref: INT-2533

[solomon23]

NOTE: I was able to get a workaround for this by adding a setTimeout inside my setter before clearing the model value

Here's this sandbox which shows the problem i believe https://codesandbox.io/s/vibrant-yonath-hq4bj?file=/src/app/editor.component.ts

I don't get the script error but I do get the behavior where inside a "setter" - clearing the model data doesn't clear it unless there's a timeout in the setter

[jscasca]

Hi @solomon23

The exception you are getting is because Angular change detection is synchronous and, at least in development mode, you get a digest verification that identifies the changes in the child component.

As you pointed out, using a timeout can be a workaround since it waits for the synchronous code to finish executing, similarly you can use a promise Promise.resolve(null).then(() => this.commentText = ''); to obtain the same results. However, this is considered a bit of a bad practice and it is usually recommended to change the component design to avoid this kind of issues.