angular: ExpressionChangedAfterItHasBeenCheckedError - HostBinding and Animations `.done`

I’m submitting a…

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see

Current behavior

When I am using HostBinding and Animation .done and I update an property that is being using in HostBinding I am getting ExpressionChangedAfterItHasBeenCheckedError when the value is changed too quickly, even though I am using markForCheck.

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: 'true'.
    at viewDebugError (errors.ts:30)
    at expressionChangedAfterItHasBeenCheckedError (errors.ts:29)
    at checkBindingNoChanges (util.ts:145)
    at checkNoChangesNodeInline (view.ts:477)
    at checkNoChangesNode (view.ts:568)
    at debugCheckNoChangesNode (services.ts:557)
    at debugCheckRenderNodeFn (services.ts:500)
    at Object.eval [as updateRenderer] (AppComponent_Host.html:1)
    at Object.debugUpdateRenderer [as updateRenderer] (services.ts:477)
    at checkNoChangesView (view.ts:383)

Expected behavior

No error

Minimal reproduction of the problem with instructions

Below please find a simple reproduction;

To get the error, simply click the button quickly several times.

What is the motivation / use case for changing the behavior?

I believe that this shouldn’t be happening, I don’t have bidirectional data flow which might cause such issues, And I am explicitly saying that there are changes, as I am using markForCheck.


Angular 4.3.4

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 11
  • Comments: 20 (5 by maintainers)

Most upvoted comments

Still an issue on 12.1.3

  @HostBinding('class.has-scroll') public get hasRemainingScroll(): boolean {
    const { scrollWidth, clientWidth, scrollLeft } = this.elementRef.nativeElement.querySelector('.ed-table-body');
    return scrollLeft + clientWidth < scrollWidth;

I’ve updated to 17.1.3, and I’ve also tried 17.2.0-rc.1. I’m still seeing errors for the non-Signal cases.

yea, we had an issue that required a rollback of the classic plain property and markForCheck support that made it into 17.1.3. If you check 17.1.2, you should see it working. We’ll need to determine if it’s something we can support again but generally signals are the way to go to avoid the error.

@reduckted a reproduction would be helpful. I have a suspicion about the cause but would like to verify.

OK I see the issue here, looking into it.